/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

    Compability: v7.10.2-release.1

***************************************************** */
body{
    font-size: 16px;
    background-color: #0a0228;
}
h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

/* WICHTIG: position darf nicht "inherit" sein — sonst ist der Header static und
   z-index aus style.css greift nicht → Dropdown liegt UNTER #main-body */
.not-home {
    position: relative;
    z-index: 1030;
    background: #022384 url("../images/bg-home-img-1.jpg") center center / cover no-repeat;
}

/* Header immer über Seiteninhalt (Home nutzt position:absolute aus style.css) */
.header-transparent {
    z-index: 1030 !important;
}

/* Hauptbereich bewusst darunter halten */
section#main-body {
    position: relative;
    z-index: 1;
}
.xs-header .logo {
    display: block;
    padding: 20px 0;
}

/* Entfernt die weiße Trennlinie unter dem Header */
.header-transparent .xs-header {
    border-bottom: none !important;
}

/* Homepage: Menü etwas nach unten schieben (Ausrichtung zum Hero-Layout) — nur Desktop */
@media (min-width: 992px) {
    .header-transparent .xs-header .xs-menus {
        transform: translateY(40px) !important;
    }
}
ul.top-nav {
    margin-top: 0px;

}
ul.top-nav>li>a {
    padding: 0px 10px;
    color: #fff;
}
ul.top-nav>li:active>a, ul.top-nav>li:focus>a, ul.top-nav>li:hover>a, ul.top-nav>li>a:focus {
    color: #efefef;
}
.language-popover .popover-content li a {
    color: #f2f2f2;
    font-size: .8rem;
}
.top-menu li {
    display: inline-block;
    margin-right: 15px;
}
section#main-menu {
    background-color: transparent;
}
.navbar-main {
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    min-height: 38px;
    font-family: Raleway,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
}
.whmcs-submenu .navbar-nav>li>a {
    padding-top: 15px;
    font-size: .9rem;
    padding-bottom: 14px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.navbar-main .navbar-nav>.active>a, .navbar-main .navbar-nav>.active>a:focus, .navbar-main .navbar-nav>.active>a:hover, .navbar-main .navbar-nav>.open>a, .navbar-main .navbar-nav>.open>a:focus, .navbar-main .navbar-nav>.open>a:hover, .navbar-main .navbar-nav>li>a:focus, .navbar-main .navbar-nav>li>a:hover {
    color: #eee;
    background-color: transparent;
}

.navbar-nav>li>.dropdown-menu {
    -webkit-box-shadow: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(130, 51, 255, 0.08);
    background: rgba(14, 6, 42, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 10px 0;
    margin-top: 8px;
    min-width: 220px;
    animation: beDropIn 0.22s ease;
}

@keyframes beDropIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-menu>li>a {
    padding: 10px 20px;
    display: block;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.18s, color 0.18s, padding-left 0.18s;
    border-radius: 0;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background: rgba(178, 60, 255, 0.12) !important;
    color: #ffffff !important;
    padding-left: 24px;
}

.dropdown-menu>li.active>a,
.dropdown-menu>li.active>a:hover {
    background: rgba(178, 60, 255, 0.18) !important;
    color: #ffffff !important;
}

.dropdown-menu .divider {
    background-color: rgba(255, 255, 255, 0.06);
    margin: 6px 0;
}

/* Global dropdown override (Bootstrap default is white) */
.dropdown-menu {
    background: rgba(14, 6, 42, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(130, 51, 255, 0.08) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 8px 0 !important;
}

/* Hover-open dropdown on desktop */
@media (min-width: 992px) {
    .navbar-nav > li.dropdown:hover,
    .navbar-nav > li.dropdown.open {
        z-index: 1051;
    }
    .navbar-nav > li.dropdown:hover > .dropdown-menu {
        display: block;
    }
    .navbar-nav > li.dropdown > .dropdown-menu {
        margin-top: 0;
        z-index: 1060 !important;
    }
}

/* Mobile: geöffnetes Menü ebenfalls nach vorne */
.navbar-nav > li.dropdown.open {
    z-index: 1051;
}

/* Dropdown item icon color */
.dropdown-menu > li > a i {
    color: #a78bfa;
    margin-right: 4px;
}

/* Override bootstrap .open > .dropdown-menu background */
.open > .dropdown-menu {
    background: rgba(14, 6, 42, 0.97) !important;
}
ul.top-nav>li.primary-action>a.btn {
    background-color: #1044db;
}
.xs-top-bar {
    padding: 10px 0;
}
ul.xs-top-bar-info {
    margin-top: 7px;
}

section#home-banner {
    padding: 280px 0 80px;
    background: transparent;
    position: relative;
}
section#home-banner .icon-bg{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.be-hero-row {
    margin-bottom: 40px;
}

.be-hero-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-radius: 999px;
    background: rgba(9, 13, 36, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 560px;
    margin: 0 auto;
}

.be-hero-top-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.be-hero-top-logo img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

.be-hero-top-logo-sub {
    font-size: 12px;
    opacity: 0.8;
}

.be-hero-top-cta {
    display: flex;
    gap: 10px;
}

.be-hero-top-btn-primary,
.be-hero-btn-primary {
    background: #c63fff;
    border-color: #c63fff;
    color: #ffffff;
    padding: 8px 22px;
    border-radius: 10px !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.be-hero-top-btn-secondary,
.be-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: #ffffff;
    padding: 8px 22px;
    border-radius: 10px !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.be-hero-top-btn-primary:hover,
.be-hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(198, 63, 255, 0.35);
    filter: brightness(1.05);
}

.be-hero-top-btn-secondary:hover,
.be-hero-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(255, 255, 255, 0.12);
    filter: brightness(1.05);
}

.be-hero-main-row {
    align-items: flex-end;
}

.be-hero-main {
    color: #ffffff;
}

.be-hero-title {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 18px;
}

.be-hero-subtitle {
    font-size: 15px;
    line-height: 1.7;
    max-width: 540px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, 0.85);
}

.be-hero-cta-row {
    display: flex;
    gap: 12px;
    margin-bottom: 26px;
}

.be-hero-metrics {
    display: flex;
    gap: 40px;
}

.be-hero-metric-value {
    font-size: 24px;
    font-weight: 600;
}

.be-hero-metric-label {
    font-size: 13px;
    opacity: 0.8;
}

.be-hero-metric-value.be-hero-animate {
    animation: beHeroMetricPop 0.6s ease-out;
}

@keyframes beHeroMetricPop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

.be-hero-highlight-card {
    background: rgba(9, 13, 36, 0.8);
    border-radius: 18px;
    padding: 14px 18px;
    max-width: 360px;
    margin-left: auto;
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translateY(228px);
    transition: box-shadow 0.25s ease, filter 0.25s ease;
}

.be-hero-highlight-card:hover {
    filter: brightness(1.03);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}

.be-hero-highlight-image img {
    display: block;
    width: 110px;
    height: 110px;
    border-radius: 12px;
}

.be-hero-highlight-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #c63fff;
    margin-bottom: 6px;
}

.be-hero-highlight-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 6px;
}

.be-hero-highlight-text {
    font-size: 13px;
    opacity: 0.85;
}

.be-hero-highlight-content {
    min-width: 0;
}

/* Tablet / Mobil: Hero-Spalten zuverlässig untereinander, keine Überlagerung mit H1 */
@media (max-width: 991px) {
    section#home-banner {
        padding: 160px 0 56px;
    }

    #home-banner .be-hero-main-row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    #home-banner .be-hero-main-row > .col-md-7,
    #home-banner .be-hero-main-row > .col-md-5 {
        width: 100% !important;
        max-width: 100%;
        float: none !important;
    }

    #home-banner .be-hero-main-row > .col-md-7 {
        order: 1;
    }

    #home-banner .be-hero-main-row > .col-md-5 {
        order: 2;
        margin-top: 18px;
    }

    .be-hero-main {
        position: relative;
        z-index: 2;
    }

    .be-hero-highlight-card {
        transform: none !important;
        position: relative;
        z-index: 1;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 767px) {
    section#home-banner {
        padding: 120px 0 44px;
    }

    .be-hero-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .be-hero-main-row {
        margin-top: 20px;
    }

    .be-hero-title {
        font-size: 26px;
        line-height: 1.15;
    }

    .be-hero-subtitle {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .be-hero-cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .be-hero-metrics {
        gap: 20px;
        flex-wrap: wrap;
    }

    .be-hero-highlight-card {
        margin: 20px auto 0;
        transform: translateY(0);
        padding: 12px 14px;
        gap: 12px;
        align-items: flex-start;
    }

    .be-hero-highlight-image {
        flex-shrink: 0;
    }

    .be-hero-highlight-image img {
        width: 72px;
        height: 72px;
        object-fit: contain;
    }

    .be-hero-highlight-tag {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .be-hero-highlight-title {
        font-size: 15px;
        line-height: 1.35;
        margin-bottom: 4px;
    }

    .be-hero-highlight-text {
        font-size: 12px;
        line-height: 1.5;
    }
}

@media (max-width: 575px) {
    section#home-banner {
        padding: 100px 0 36px;
    }

    .be-hero-highlight-card {
        flex-direction: row;
        align-items: center;
        padding: 10px 12px;
        gap: 10px;
    }

    .be-hero-highlight-image {
        max-width: 52px;
    }

    .be-hero-highlight-image img {
        width: 48px !important;
        height: 48px !important;
        max-width: 100%;
    }

    /* Langer Firmenname in der Karte doppelt die Headline — auf schmalen Screens nur Kompakt-Branding */
    .be-hero-highlight-title,
    .be-hero-highlight-text {
        display: none;
    }

    .be-hero-highlight-tag {
        margin-bottom: 0;
        font-size: 10px;
    }
}

/* Subtle hero load-in (no layout change) */
section#home-banner .be-hero-main {
    animation: beHeroFadeIn 0.6s ease-out both;
}

section#home-banner .be-hero-highlight-card {
    animation: beHeroFadeIn 0.8s ease-out both;
}

@keyframes beHeroFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    section#home-banner .be-hero-main,
    section#home-banner .be-hero-highlight-card {
        animation: none;
    }

    .be-hero-top-btn-primary:hover,
    .be-hero-btn-primary:hover,
    .be-hero-top-btn-secondary:hover,
    .be-hero-btn-secondary:hover {
        transform: none;
    }
}
section#home-banner .btn {
    font-size: 16px;
}
section#home-banner .btn.search {
    background-color: #1044db;
}
section#home-banner .btn.transfer {
    background-color: #0d34a4;
}
section#home-banner h2 {
    margin-bottom: 32px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 40px;
}
.domainchecker-homepage-captcha .captchaimage{padding: 0}
.domainchecker-homepage-captcha .captchaimage img{height: 41px;}
.dropdown-toggle .caret{
    margin-left: -3px;
}
.caret{
    height: 6px;
    width: 6px;
    border-style: solid;
    border-width: 0 1px 1px 0;
    border-color: transparent #ffffff #ffffff transparent;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -3px;
}
#default-captcha-domainchecker{ margin-top: 25px;}
#default-captcha-domainchecker p{margin-bottom: 20px;}

/* (home-shortcuts section wurde entfernt) */

section#main-body.xs-main-body {
    margin: 0;
    padding: 0;
    min-height: 350px;
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.10), transparent 45%),
        #0b001a;
}
.xs-main-body .main-content{
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.xs-main-body > .container {
    padding-bottom: 0;
    margin-bottom: 0;
}

.xs-main-body > .container > .row {
    margin-bottom: 0;
    padding-bottom: 0;
}

.xs-main-body > .container > .row > .clearfix {
    display: none;
}

.xs-main-body > .container > .row::after {
    display: none;
}

.contact-info-widget li img {
    float: left;
}

.domain-pricing .tld-row.highlighted {
    background: #e0eff9;
}
.panel-default>.panel-heading {
    color: #fff;
    background-color: #1868dd;
}
/* Sidebar-Blau nur außerhalb Client-Dashboard — im Dashboard gelten Glass-Styles (.be-dashboard-page .sidebar) */
section#main-body:not(.be-dashboard-page) .panel.panel-sidebar > .panel-heading {
    background-color: #3482ff;
}
section#main-body:not(.be-dashboard-page) .panel.panel-sidebar .panel-title {
    color: #fff;
}

.alert-info {
    color: #31708f;
    background-color: #d9dbf7;
    border-color: #bce8f1;
}
.form-control {
    height: 41px;
}

.logincontainer {
    padding: 20px;
    background: #f5f3ff;
}
/*.main-content{
    background: #f8f7fd;
}*/
.captchaimage {
    height: 37px;
}
.domainchecker-homepage-captcha .default-captcha-domainchecker{
    margin-top: 35px;
}
.domainchecker-homepage-captcha .default-captcha-domainchecker p{
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .collapse.in {
        background: rgb(20, 35, 147);
    }
    .navbar-main .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    section#home-banner h2 {
        line-height: 38px;
        font-size: 27px;
    }
    section#home-banner .btn.search,
    section#home-banner .btn.transfer{
        font-size: 14px;
    }
    .home-shortcuts li{
        width: 100%;
        margin-bottom: 10px;
    }
    .top-menu li {
        margin-right: 0;
    }
    ul.top-nav>li>a {
        padding: 0px;
        color: #fff;
    }
    .form-control {
        height: 36px;
    }
    .domainchecker-homepage-captcha .captchaimage img {
        height: 38px;
    }
    .xs-main-body blockquote p{
        font-size: 16px;
    }
    #order-standard_cart .products .product .btn:not(.be-home-pricing-btn) {
        display: inherit;
        margin-right: 4px;
    }
}

.client-home-panels input{    height: 32px;}
.client-home-panels .panel-default>.panel-heading {
    color: #333;
}


.navbar-main li.account {
    background-color: rgba(29, 29, 29, 0);
}

.btn-default{    border: 1px solid #cccccc;}
.xs-header .col-lg-2 {float: left
}

/* Homepage – About section (dark style) */
.be-home-about {
    background: transparent;
    padding: 120px 0 130px;
    color: #fff;
    position: relative;
}

.be-home-about .container {
    max-width: 1260px;
}

.be-section-eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 145, 255, 0.88);
}

.be-home-about::after,
.be-home-services::after,
.be-home-pricing::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    pointer-events: none;
}

.be-home-about::after,
.be-home-services::after,
.be-home-pricing::after {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.13), transparent);
    box-shadow: 0 6px 38px 12px rgba(140, 69, 255, 0.10);
}

.be-home-about-row {
    display: flex;
    align-items: center;
}

.be-home-about-row > .col-md-6 {
    padding-left: 15px;
    padding-right: 15px;
}

.be-home-about-content {
    max-width: 100%;
}

.be-home-about-title {
    margin: 0 0 10px;
    font-size: 44px;
    line-height: 1.08;
    font-weight: 700;
    color: #ffffff;
}

.be-home-about-subtitle {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.18;
    font-weight: 700;
    color: #ffffff;
}

.be-home-about-text {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
}

.be-home-about-btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: 13px 36px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(90deg, #b23cff 0%, #7b2fff 100%);
    box-shadow: 0 12px 30px rgba(130, 51, 255, 0.38);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.be-home-about-btn:hover,
.be-home-about-btn:focus {
    color: #ffffff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(130, 51, 255, 0.45);
}

.be-home-about-bottom {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.be-home-about-avatars {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 10px;
}

.be-home-about-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #0a0228;
    margin-left: -7px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.be-home-about-avatar:first-child {
    margin-left: 0;
}

.be-home-about-avatar-1 {
    background: linear-gradient(135deg, #c2a0ff 0%, #9d5cff 100%);
}

.be-home-about-avatar-2 {
    background: linear-gradient(135deg, #8bcfff 0%, #5290ff 100%);
}

.be-home-about-avatar-3 {
    background: linear-gradient(135deg, #93ead9 0%, #3dc4a0 100%);
}

.be-home-about-clients {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.be-home-about-clients strong {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.be-home-about-clients span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.76);
}

.be-home-about-note {
    margin: 0;
    max-width: 220px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.84);
}

.be-home-about-images {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.be-home-about-image-main,
.be-home-about-image-small {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

.be-home-about-image-main {
    flex: 1;
}

.be-home-about-image-main img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.be-home-about-image-small {
    flex: 0 0 155px;
    margin-bottom: 0;
}

.be-home-about-image-small img {
    width: 100%;
    height: 165px;
    object-fit: cover;
    display: block;
}

/* Topbar Account dropdown (modern styling) */
.xs-top-bar .be-topbar-account-menu {
    background: rgba(11, 3, 38, 0.78);
    border: 1px solid rgba(198, 63, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
    padding: 8px 0;
    margin-top: 10px;
    min-width: 0;
    width: auto;
    max-width: 240px;
    left: auto;
    right: 0;
    text-align: left;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.xs-top-bar .be-topbar-account-menu > li {
    float: none !important;
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Nur bei geöffnetem Dropdown sichtbar */
.xs-top-bar .dropdown.open .be-topbar-account-menu,
.xs-top-bar .dropdown.show .be-topbar-account-menu {
    display: block !important;
}

.xs-top-bar .be-topbar-account-menu > li > a {
    color: #ffffff !important;
    font-size: 14px;
    padding: 10px 16px;
    display: block;
    background: transparent !important;
    white-space: nowrap;
    border-left: 3px solid transparent;
    margin: 0;
    border-radius: 12px;
    transition: background 0.18s ease, border-left-color 0.18s ease, transform 0.18s ease;
}

/* Divider inside Account dropdown */
.xs-top-bar .be-topbar-account-menu .be-topbar-divider {
    height: 1px;
    background: transparent;
    margin: 10px 0px; /* shortened to fit menu content */
    padding: 0;
}

.xs-top-bar .be-topbar-account-menu .be-topbar-divider span {
    display: block;
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.10);
}

.xs-top-bar .be-topbar-account-menu > li > a:hover,
.xs-top-bar .be-topbar-account-menu > li > a:focus {
    background: rgba(198, 63, 255, 0.22) !important;
    color: #ffffff !important;
    border-left-color: rgba(198, 63, 255, 0.95);
    transform: translateY(-1px);
}

.xs-top-bar .be-topbar-account-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.xs-top-bar .be-topbar-account-toggle:hover,
.xs-top-bar .be-topbar-account-toggle:focus {
    background: rgba(198, 63, 255, 0.18);
    border-color: rgba(198, 63, 255, 0.35);
}


@media (max-width: 991px) {
    .be-home-about-row {
        display: block;
    }

    .be-home-about {
        padding: 96px 0 100px;
    }

    .be-home-about-content {
        max-width: none;
    }

    .be-home-about-title {
        font-size: 44px;
    }

    .be-home-about-subtitle {
        font-size: 32px;
    }

    .be-home-about-images {
        margin-top: 36px;
        padding-left: 0;
    }

    .be-home-about-image-small {
        left: 0;
        width: 40%;
    }
}

@media (max-width: 767px) {
    .be-home-about {
        padding: 78px 0 82px;
    }

    .be-home-about-title {
        font-size: 36px;
    }

    .be-home-about-subtitle {
        font-size: 28px;
    }

    .be-home-about-text {
        font-size: 15px;
    }

    .be-home-about-bottom {
        flex-wrap: wrap;
        margin-top: 28px;
    }

    .be-home-about-clients strong {
        font-size: 28px;
    }

    .be-home-about-image-main img {
        height: 360px;
    }

    .be-home-about-image-small {
        position: relative;
        left: 0;
        bottom: 0;
        width: 60%;
        margin-top: 14px;
    }

    .be-home-about-image-small img {
        height: 140px;
    }

    .be-home-about-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}

@media (max-width: 575px) {
    .be-home-about-title {
        font-size: 30px;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    .be-home-about-subtitle {
        font-size: 24px;
    }

    .be-home-about-images {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .be-home-about-image-small,
    .be-home-about-image-main {
        flex: none !important;
        width: 100% !important;
        max-width: 100%;
    }

    .be-home-about-image-main img {
        height: auto;
        min-height: 200px;
        max-height: 280px;
    }

    .be-home-about-image-small img {
        height: auto;
        min-height: 140px;
        max-height: 200px;
    }
}

/* Bobardt Enterprises footer clone */
.be-footer {
    background-color: #0b0326;
    color: #ffffff;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding-top: 80px;
    padding-bottom: 40px;
}

.be-footer a {
    color: #f5f3ff;
}

.be-footer a:hover,
.be-footer a:focus {
    color: #9f63ff;
    text-decoration: none;
}

.be-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.be-footer-top {
    align-items: flex-start;
}

.be-footer-col-logo {
    margin-bottom: 40px;
}

.be-footer-logo-block {
    max-width: 260px;
}

.be-footer-logo-image img {
    display: block;
    max-width: 150px;
    margin-bottom: 22px;
}

.be-footer-company-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}

.be-footer-company-tagline {
    font-size: 13px;
    opacity: 0.8;
    margin-bottom: 18px;
}

.be-footer-social {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.be-footer-social-link {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 13px;
}

.be-footer-social-link:hover {
    background: #9f63ff;
    color: #ffffff;
}

.be-footer-description {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.85;
}

.be-footer-col {
    margin-bottom: 40px;
}

.be-footer-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #ffffff;
}

.be-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.be-footer-menu li {
    margin-bottom: 10px;
}

.be-footer-link {
    font-size: 15px;
    color: #f5f3ff;
    opacity: 0.85;
}

.be-footer-link:hover {
    opacity: 1;
}

.be-footer-contact-list .be-footer-contact-item {
    display: flex;
    align-items: flex-start;
}

.be-footer-contact-icon {
    width: 20px;
    margin-right: 10px;
    color: #9f63ff;
    font-size: 13px;
    line-height: 1.6;
}

.be-footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 40px;
    margin-bottom: 24px;
}

.be-footer-bottom {
    text-align: center;
}

.be-footer-copyright {
    font-size: 12px;
    opacity: 0.75;
    margin: 0;
}

/* Homepage - Services grid */
.be-home-services {
    background: transparent;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: auto;
    min-height: 0;
    position: relative;
    padding: 120px 0 130px;
    margin-bottom: 0;
}

.be-home-services + .be-footer {
    margin-top: 0;
}

.be-home-services .container {
    max-width: 1220px;
}

.be-home-services-head {
    text-align: center;
    margin-bottom: 52px;
}

.be-home-services-title {
    margin: 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.be-home-services-grid {
    margin-left: -8px;
    margin-right: -8px;
}

.be-home-services-grid > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

.be-home-service-card {
    min-height: 156px;
    padding: 20px 18px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 8, 46, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.be-home-service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 99, 255, 0.52);
    background: rgba(18, 10, 56, 0.62);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.30), 0 0 30px rgba(150, 87, 255, 0.16);
}

.be-home-service-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b970ff;
    background: rgba(185, 112, 255, 0.13);
    margin-bottom: 10px;
    font-size: 14px;
}

.be-home-service-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #ffffff;
}

.be-home-service-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.76);
}

@media (max-width: 991px) {
    .be-footer {
        padding-top: 60px;
    }

    .be-footer-inner {
        padding: 0 24px;
    }

    .be-home-services {
        padding: 96px 0 100px;
    }

    .be-home-services-title {
        font-size: 30px;
    }

    .be-home-service-card h3 {
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .be-footer-top {
        text-align: left;
    }

    .be-footer-col-logo,
    .be-footer-col {
        margin-bottom: 32px;
    }

    .be-home-services {
        padding: 78px 0 82px;
    }

    .be-home-services-head {
        margin-bottom: 36px;
    }

    .be-home-pricing {
        padding: 78px 0 82px;
    }

    .be-home-services-grid > [class*="col-"] {
        margin-bottom: 14px;
    }

    .be-home-service-card {
        min-height: 0;
    }

    .be-home-service-card h3 {
        font-size: 16px;
    }
}

/* Homepage - Pricing plans */
.be-home-pricing {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: transparent;
    padding: 120px 0 130px;
    position: relative;
}

.be-home-pricing .container {
    max-width: 1220px;
}

.be-home-pricing--gpu {
    padding-top: 0;
    padding-bottom: 130px;
}

.be-home-pricing-grid--two {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.be-home-pricing-grid--two > [class*="col-"] {
    margin-bottom: 22px;
}

.be-home-pricing-features--hardware li {
    align-items: flex-start;
}

.be-home-pricing-features--hardware .be-home-pricing-check {
    margin-top: 3px;
}

.be-home-pricing-feature-detail {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.58);
    margin-top: 4px;
}

.be-home-pricing-gpu-footnote {
    margin: 28px auto 0;
    max-width: 520px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.be-home-pricing-head {
    text-align: center;
    margin-bottom: 52px;
}

.be-home-pricing-title {
    margin: 0;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.be-home-pricing-grid > [class*="col-"] {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 22px;
}

.be-home-pricing-card {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 8, 46, 0.56);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 28px 26px 26px;
    height: 100%;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.be-home-pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 99, 255, 0.52);
    background: rgba(18, 10, 56, 0.62);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.31), 0 0 36px rgba(150, 87, 255, 0.18);
}

.be-home-pricing-card--popular {
    transform: scale(1.03);
    border-color: rgba(184, 118, 255, 0.58);
    box-shadow: 0 26px 56px rgba(0, 0, 0, 0.35), 0 0 42px rgba(171, 102, 255, 0.24);
    z-index: 2;
}

.be-home-pricing-card--popular:hover {
    transform: translateY(-6px) scale(1.035);
    box-shadow: 0 30px 62px rgba(0, 0, 0, 0.38), 0 0 54px rgba(171, 102, 255, 0.30);
}

.be-home-pricing-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: rgba(178, 60, 255, 0.22);
    border: 1px solid rgba(178, 60, 255, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.be-home-pricing-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.be-home-pricing-plan-name {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.be-home-pricing-plan-desc {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.74);
    min-height: 42px;
}

.be-home-pricing-starting {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 10px;
}

.be-home-pricing-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 18px;
}

.be-home-pricing-price-value {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.be-home-pricing-price-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.be-home-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    flex: 1;
}

.be-home-pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 10px;
}

.be-home-pricing-check {
    color: #b970ff;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.be-home-pricing-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    padding: 12px 28px;
    background: linear-gradient(90deg, #b23cff 0%, #7b2fff 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(130, 51, 255, 0.35);
}

.be-home-pricing-btn:hover,
.be-home-pricing-btn:focus {
    filter: brightness(1.05);
    color: #ffffff !important;
    text-decoration: none;
}

@media (max-width: 991px) {
    .be-home-pricing {
        padding: 96px 0 100px;
    }

    .be-home-pricing-title {
        font-size: 30px;
    }

    .be-home-pricing-card {
        padding: 22px 18px 20px;
    }

    .be-home-pricing-card--popular,
    .be-home-pricing-card--popular:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    .be-home-pricing-head {
        margin-bottom: 36px;
    }

    .be-home-pricing-title {
        font-size: 28px;
    }

    .be-home-pricing-price-value {
        font-size: 34px;
    }

    .be-home-pricing-plan-desc {
        min-height: 0;
    }

    .be-home-pricing-btn {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }

    .be-home-pricing-badge {
        top: 10px;
        right: 10px;
        font-size: 10px;
        padding: 5px 8px;
    }
}

@media (max-width: 575px) {
    .be-home-pricing {
        padding: 64px 0 72px;
    }

    .be-home-pricing-title {
        font-size: 24px;
    }

    .be-home-pricing-plan-name {
        font-size: 20px;
        padding-right: 72px;
    }

    .be-home-pricing-price-value {
        font-size: 30px;
    }
}

/* =========================================================
   New Hero Section (.be-newhero-*)
   Completely isolated — does NOT touch any existing styles.
   ========================================================= */
.be-newhero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    background:
        linear-gradient(180deg, rgba(8, 2, 28, 0.72) 0%, rgba(8, 2, 28, 0.72) 100%),
        url("../images/Work-With-Us-bg-img.jpg") center center / cover no-repeat;
    padding: 120px 20px;
    text-align: center;
    color: #ffffff;
}

.be-newhero-inner {
    max-width: 800px;
    margin: 0 auto;
    animation: beNewheroFadeIn 0.7s ease-out both;
}

.be-newhero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 30px;
}

.be-newhero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b970ff;
    flex-shrink: 0;
}

.be-newhero-title {
    font-size: 52px;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 26px;
    color: #ffffff;
}

.be-newhero-desc {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.68);
    max-width: 660px;
    margin: 0 auto 40px;
}

.be-newhero-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.be-newhero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(90deg, #b23cff 0%, #8a2be2 100%);
    box-shadow: 0 14px 36px rgba(150, 60, 255, 0.32);
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.be-newhero-btn-primary:hover,
.be-newhero-btn-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(150, 60, 255, 0.44);
    filter: brightness(1.06);
    color: #ffffff;
    text-decoration: none;
}

.be-newhero-btn-secondary {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
}

.be-newhero-btn-secondary:hover,
.be-newhero-btn-secondary:focus {
    color: #ffffff;
    text-decoration: underline;
}

.be-newhero-trust {
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.50);
    margin: 0;
}

.be-newhero-trust i {
    color: rgba(255, 200, 60, 0.78);
    margin-right: 6px;
}

.be-newhero-trust strong {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

@keyframes beNewheroFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    .be-newhero {
        padding: 88px 0 80px;
    }

    .be-newhero-title {
        font-size: 40px;
    }

    .be-newhero-desc {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .be-newhero {
        padding-top: 72px;
        padding-bottom: max(64px, env(safe-area-inset-bottom, 0px));
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .be-newhero-title {
        font-size: 30px;
    }

    .be-newhero-title br {
        display: none;
    }

    .be-newhero-desc {
        margin-bottom: 32px;
    }

    .be-newhero-cta {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .be-newhero-btn-primary {
        min-height: 44px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .be-newhero-btn-secondary {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 16px;
    }

    .be-newhero-trust {
        font-size: 12px;
        padding: 0 4px;
    }
}

@media (max-width: 575px) {
    .be-newhero {
        padding-top: 64px;
    }

    .be-newhero-title {
        font-size: 26px;
    }

    .be-newhero-eyebrow {
        margin-bottom: 22px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .be-newhero-inner {
        animation: none;
    }
}

/* =========================================================
   Testimonials Section (.be-testimonials-*)
   Completely isolated — does NOT touch any existing styles.
   ========================================================= */
.be-testimonials {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #0a0228;
    padding: 110px 20px;
    position: relative;
    overflow: hidden;
}

.be-testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* --- Left: Orbit --- */
.be-testimonials-left {
    flex: 0 0 360px;
    position: relative;
}

.be-testimonials-orbit {
    position: relative;
    width: 340px;
    height: 340px;
    margin: 0 auto;
    animation: beTestimonialsOrbitSpin 60s linear infinite;
}

.be-testimonials-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b970ff 0%, #8a3cff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(185, 112, 255, 0.35);
    animation: beTestimonialsOrbitSpinReverse 60s linear infinite;
}

.be-testimonials-avatar {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid rgba(185, 112, 255, 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.be-testimonials-av1 {
    top: 2%;
    left: 38%;
    background: linear-gradient(135deg, #c9a0ff, #9d5cff);
}

.be-testimonials-av2 {
    top: 22%;
    right: 2%;
    background: linear-gradient(135deg, #80d4ff, #4a9eff);
}

.be-testimonials-av3 {
    bottom: 8%;
    right: 12%;
    background: linear-gradient(135deg, #93ead9, #3dc4a0);
}

.be-testimonials-av4 {
    bottom: 4%;
    left: 14%;
    background: linear-gradient(135deg, #ffb4d6, #e56baf);
}

.be-testimonials-av5 {
    top: 40%;
    left: -2%;
    background: linear-gradient(135deg, #ffe08a, #f5a623);
}

.be-testimonials-float {
    position: absolute;
    border-radius: 50%;
}

.be-testimonials-fl1 {
    width: 16px;
    height: 16px;
    top: 12%;
    right: 18%;
    background: rgba(168, 230, 255, 0.55);
    animation: beTestimonialsFloat 4s ease-in-out infinite alternate;
}

.be-testimonials-fl2 {
    width: 10px;
    height: 10px;
    bottom: 22%;
    left: 4%;
    background: rgba(220, 180, 255, 0.45);
    animation: beTestimonialsFloat 5s ease-in-out 1s infinite alternate;
}

.be-testimonials-fl3 {
    width: 22px;
    height: 22px;
    top: 55%;
    right: -4%;
    background: rgba(185, 112, 255, 0.35);
    border: 2px solid rgba(185, 112, 255, 0.45);
    animation: beTestimonialsFloat 6s ease-in-out 0.5s infinite alternate;
}

/* --- Right: Slider --- */
.be-testimonials-right {
    flex: 1;
    min-width: 0;
}

.be-testimonials-slider {
    position: relative;
    min-height: 280px;
}

.be-testimonials-pair {
    display: none;
    gap: 24px;
}

.be-testimonials-pair--active {
    display: flex;
    animation: beTestimonialsFadeIn 0.6s ease-out both;
}

.be-testimonials-card {
    flex: 1;
    min-width: 0;
    padding: 28px 26px 24px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 8, 46, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
}

.be-testimonials-text {
    font-size: 14px;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 22px;
}

.be-testimonials-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.be-testimonials-author-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(185, 112, 255, 0.5);
}

.be-testimonials-aa1 { background: linear-gradient(135deg, #c9a0ff, #7b4cff); }
.be-testimonials-aa2 { background: linear-gradient(135deg, #80d4ff, #4a82ff); }
.be-testimonials-aa3 { background: linear-gradient(135deg, #93ead9, #2db68a); }
.be-testimonials-aa4 { background: linear-gradient(135deg, #ffe08a, #e5a020); }
.be-testimonials-aa5 { background: linear-gradient(135deg, #ffb4d6, #d04e90); }
.be-testimonials-aa6 { background: linear-gradient(135deg, #a8e6ff, #5592ff); }

.be-testimonials-stars {
    margin-bottom: 4px;
}

.be-testimonials-stars i {
    font-size: 12px;
    color: #ffb800;
}

.be-testimonials-author strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.be-testimonials-author span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.58);
}

/* --- Animations --- */
@keyframes beTestimonialsOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes beTestimonialsOrbitSpinReverse {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes beTestimonialsFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

@keyframes beTestimonialsFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .be-testimonials {
        padding: 88px 20px;
    }

    .be-testimonials-container {
        flex-direction: column;
        gap: 48px;
    }

    .be-testimonials-left {
        flex: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .be-testimonials-orbit {
        width: 280px;
        height: 280px;
    }

    .be-testimonials-center-circle {
        width: 110px;
        height: 110px;
        font-size: 36px;
    }

    .be-testimonials-pair--active {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .be-testimonials {
        padding: 72px 16px;
    }

    .be-testimonials-orbit {
        width: 240px;
        height: 240px;
    }

    .be-testimonials-avatar {
        width: 40px;
        height: 40px;
    }

    .be-testimonials-center-circle {
        width: 90px;
        height: 90px;
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .be-testimonials-orbit {
        animation: none;
    }

    .be-testimonials-center-circle {
        animation: none;
    }

    .be-testimonials-fl1,
    .be-testimonials-fl2,
    .be-testimonials-fl3 {
        animation: none;
    }

    .be-testimonials-pair--active {
        animation: none;
    }
}

/* =========================================================
   FAQ Section (.be-faq-*)
   Completely isolated — does NOT touch any existing styles.
   ========================================================= */
.be-faq {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #0a0228;
    padding: 120px 20px 110px;
    position: relative;
}

.be-faq-inner {
    max-width: 100%;
    margin: 0 auto;
}

.be-faq-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 42px;
}

.be-faq-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b970ff;
    flex-shrink: 0;
}

.be-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.be-faq-item {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.be-faq-item:hover {
    border-color: rgba(185, 112, 255, 0.28);
}

.be-faq-item--open {
    border-color: rgba(185, 112, 255, 0.38);
    background: rgba(18, 10, 52, 0.62);
}

.be-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    gap: 16px;
    transition: color 0.2s ease;
}

.be-faq-question:hover {
    color: rgba(255, 255, 255, 0.92);
}

.be-faq-question:focus {
    outline: 2px solid rgba(185, 112, 255, 0.5);
    outline-offset: -2px;
}

.be-faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    transition: transform 0.3s ease, color 0.3s ease;
}

.be-faq-item--open .be-faq-icon {
    transform: rotate(45deg);
    color: #b970ff;
}

.be-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

.be-faq-item--open .be-faq-answer {
    max-height: 300px;
    opacity: 1;
}

.be-faq-answer-inner {
    padding: 0 24px 22px;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.68);
}

.be-faq-trust {
    text-align: center;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.44);
    margin: 48px 0 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.be-faq-trust i:first-child {
    color: rgba(255, 200, 60, 0.72);
    margin-right: 4px;
}

.be-faq-trust i:last-child {
    color: rgba(185, 112, 255, 0.62);
    margin-left: 4px;
}

@media (max-width: 991px) {
    .be-faq {
        padding: 96px 20px 88px;
    }
}

@media (max-width: 767px) {
    .be-faq {
        padding-top: 72px;
        padding-bottom: 68px;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .be-faq-question {
        font-size: 14px;
        padding: 18px 18px;
        min-height: 48px;
    }

    .be-faq-answer-inner {
        padding: 0 18px 18px;
        font-size: 13px;
    }

    .be-faq-eyebrow {
        margin-bottom: 32px;
    }
}

/* =========================================================
   Final CTA Section (.be-cta-*)
   Completely isolated — does NOT touch any existing styles.
   ========================================================= */
.be-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    background: linear-gradient(180deg, #0a0228 0%, #10043a 40%, #1a0845 70%, #0a0228 100%);
    padding: 140px 20px 110px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.be-cta + .be-footer {
    margin-top: 0;
    padding-top: 0;
}

.be-cta-bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.be-cta-bg-glow--left {
    top: 10%;
    left: -5%;
    background: radial-gradient(circle, rgba(140, 69, 255, 0.25), transparent 70%);
}

.be-cta-bg-glow--right {
    bottom: 10%;
    right: -5%;
    background: radial-gradient(circle, rgba(180, 80, 255, 0.2), transparent 70%);
}

.be-cta-inner {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    position: static;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.be-cta-col {
    position: relative;
    z-index: 1;
}

.be-cta-col--left {
    position: absolute;
    left: 150px;
    bottom: 0;
    z-index: 2;
    line-height: 0;
}

.be-cta-col--center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
}

.be-cta-col--right {
    flex: 0 0 auto;
    align-self: flex-start;
}

.be-cta-img {
    display: block;
    height: auto;
    filter: drop-shadow(0 20px 60px rgba(120, 50, 255, 0.25));
}

.be-cta-img--robot {
    width: 370px;
    max-width: 370px;
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    margin: 0;
    padding: 0;
}

.be-cta-img--server {
    width: 400px;
    max-width: 400px;
    position: relative;
    align-self: flex-start;
}

.be-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 56px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #8c45ff 0%, #c850c0 50%, #ff6ec7 100%);
    border: none;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow:
        0 6px 30px rgba(140, 69, 255, 0.4),
        0 2px 10px rgba(200, 80, 192, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    position: relative;
    z-index: 2;
}

.be-cta-button:hover,
.be-cta-button:focus {
    transform: scale(1.05);
    box-shadow:
        0 8px 40px rgba(140, 69, 255, 0.55),
        0 4px 20px rgba(200, 80, 192, 0.4),
        0 0 60px rgba(140, 69, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.08);
}

.be-cta-button:active {
    transform: scale(1.02);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .be-cta-img--robot {
        width: 300px;
        max-width: 300px;
    }

    .be-cta-img--server {
        width: 320px;
        max-width: 320px;
    }

    .be-cta-col--center {
        bottom: 64px;
    }
}

@media (max-width: 991px) {
    .be-cta {
        padding: 100px 20px 80px;
    }

    .be-cta-img--robot {
        width: 270px;
        max-width: 270px;
    }

    .be-cta-img--server {
        width: 260px;
        max-width: 260px;
    }

    .be-cta-button {
        padding: 16px 44px;
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .be-cta {
        padding: 60px 16px 60px;
    }

    .be-cta-inner {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .be-cta-col--left,
    .be-cta-col--right {
        align-self: center;
    }

    .be-cta-col--left {
        order: 1;
        position: relative;
        left: auto;
        bottom: auto;
        line-height: normal;
    }

    .be-cta-col--center {
        order: 3;
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        align-self: center;
    }

    .be-cta-col--right {
        order: 2;
    }

    .be-cta-img--robot {
        width: min(76vw, 330px);
        max-width: min(76vw, 330px);
        position: relative;
        left: auto;
        bottom: auto;
    }

    .be-cta-img--server {
        width: min(65vw, 300px);
        max-width: min(65vw, 300px);
    }

    .be-cta-button {
        padding: 15px 38px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .be-cta {
        padding: 48px 12px 48px;
    }

    .be-cta-button {
        padding: 14px 32px;
        font-size: 14px;
    }
}

/* =========================================================
   Legal Page (Privacy Policy)
   ========================================================= */
.has-legal-page section#main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

.has-legal-page section#main-body > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.has-legal-page section#main-body > .container > .row {
    margin: 0;
}

.has-legal-page .main-content {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.has-legal-page .header-lined {
    display: none;
}

.legal-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(140, 69, 255, 0.16), transparent 40%),
        radial-gradient(circle at 86% 0%, rgba(180, 80, 255, 0.14), transparent 42%),
        #09021f;
    padding: 80px 20px 80px;
}

.legal-page .be-privacy-inner {
    max-width: 980px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.75;
}

.legal-page h1 {
    margin: 0 0 8px;
    font-size: 44px;
    line-height: 1.18;
    color: #ffffff;
}

.legal-page .be-privacy-updated {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
}

.legal-page .be-privacy-card {
    background: rgba(22, 11, 58, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 26px 24px;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
}

.legal-page .be-privacy-card h2 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #ffffff;
}

.legal-page .be-privacy-card p,
.legal-page .be-privacy-card ul {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.86);
}

.legal-page .be-privacy-card ul {
    margin-top: 8px;
    padding-left: 20px;
}

.legal-page .be-privacy-card li {
    margin-bottom: 6px;
}

.legal-page .be-privacy-card h3 {
    margin: 18px 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.legal-page .be-privacy-card h3:first-child {
    margin-top: 0;
}

.legal-page .be-privacy-card strong {
    color: #ffffff;
}

.be-legal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 14px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.be-legal-table thead th {
    background: rgba(140, 69, 255, 0.18);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.be-legal-table tbody td {
    padding: 13px 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.be-legal-table tbody tr:last-child td {
    border-bottom: none;
}

.be-legal-table tbody tr:hover {
    background: rgba(140, 69, 255, 0.08);
}

/* =========================================================
   Contact Page (.be-contact-*)
   ========================================================= */
.has-contact-page section#main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

.has-contact-page section#main-body > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.has-contact-page section#main-body > .container > .row {
    margin: 0;
}

.has-contact-page .main-content {
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.has-contact-page .header-lined {
    display: none;
}

.be-contact-alert-wrap {
    max-width: 700px;
    margin: 20px auto;
    padding: 0 20px;
}

/* Hero */
.be-contact-hero {
    position: relative;
    background: url("../images/bg-home-img-1.jpg") center center / cover no-repeat;
    padding: 100px 40px 90px;
    overflow: hidden;
}

.be-contact-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.be-contact-hero-content {
    flex: 1;
    color: #ffffff;
}

.be-contact-hero-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 20px;
    color: #ffffff;
}

.be-contact-hero-text {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
    margin: 0;
}

.be-contact-hero-image {
    flex: 0 0 360px;
}

.be-contact-hero-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Departments */
.be-contact-departments {
    background: #09021f;
    padding: 80px 20px;
}

.be-contact-departments-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
}

.be-contact-dept-card {
    flex: 1;
    background: rgba(15, 8, 46, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 32px 26px 28px;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.22);
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.be-contact-dept-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 99, 255, 0.45);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.30), 0 0 30px rgba(150, 87, 255, 0.14);
}

.be-contact-dept-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #b970ff;
    background: rgba(185, 112, 255, 0.13);
    margin: 0 auto 18px;
}

.be-contact-dept-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
}

.be-contact-dept-card p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

.be-contact-dept-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #b970ff !important;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(185, 112, 255, 0.1);
    border: 1px solid rgba(185, 112, 255, 0.25);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.be-contact-dept-link:hover {
    background: rgba(185, 112, 255, 0.2);
    border-color: rgba(185, 112, 255, 0.5);
    color: #c993ff !important;
    text-decoration: none;
}

/* Info Section (Hours + Response) */
.be-contact-info-section {
    background:
        radial-gradient(circle at 20% 30%, rgba(140, 69, 255, 0.10), transparent 40%),
        #09021f;
    padding: 80px 20px;
}

.be-contact-info-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
}

.be-contact-info-col {
    flex: 1;
    background: rgba(15, 8, 46, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 30px 28px;
    backdrop-filter: blur(8px);
}

.be-contact-info-col h2 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

.be-contact-info-col h2 i {
    color: #b970ff;
    margin-right: 10px;
}

/* Direct Contact Info */
.be-contact-direct {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.be-contact-direct-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.be-contact-direct-item > i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #b970ff;
    background: rgba(185, 112, 255, 0.12);
    flex-shrink: 0;
    margin-top: 2px;
}

.be-contact-direct-item strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.be-contact-direct-item a,
.be-contact-direct-item span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    line-height: 1.5;
}

.be-contact-direct-item a:hover {
    color: #b970ff;
}

/* Form Section */
.be-contact-form-section {
    background: #09021f;
    padding: 80px 20px;
    text-align: center;
}

.be-contact-form-inner {
    max-width: 700px;
    margin: 0 auto;
}

.be-contact-form-section h2 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}

.be-contact-form-subtitle {
    margin: 0 0 36px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

.be-contact-form {
    text-align: left;
}

.be-contact-form-row {
    display: flex;
    gap: 16px;
}

.be-contact-form-row .be-contact-form-group {
    flex: 1;
}

.be-contact-form-group {
    margin-bottom: 18px;
}

.be-contact-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.be-contact-form .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 14px;
    height: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.be-contact-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.be-contact-form .form-control:focus {
    border-color: rgba(185, 112, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(185, 112, 255, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.be-contact-form textarea.form-control {
    resize: vertical;
    min-height: 140px;
}

.be-contact-captcha {
    margin: 20px 0;
    text-align: center;
}

.be-contact-form-submit {
    margin-top: 24px;
    text-align: center;
}

.be-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 48px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff !important;
    background: linear-gradient(90deg, #b23cff 0%, #7b2fff 100%);
    border: none;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(130, 51, 255, 0.35);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    cursor: pointer;
}

.be-contact-btn:hover,
.be-contact-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(130, 51, 255, 0.48);
    filter: brightness(1.06);
    color: #ffffff !important;
}

/* Map Section */
.be-contact-map {
    width: 100%;
    line-height: 0;
    background: #09021f;
}

.be-contact-map iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
    filter: grayscale(0.3) brightness(0.85) contrast(1.1);
}

/* Responsive */
@media (max-width: 991px) {
    .be-contact-hero {
        padding: 80px 24px 70px;
    }

    .be-contact-hero-inner {
        flex-direction: column;
        gap: 36px;
        text-align: center;
    }

    .be-contact-hero-content {
        order: 1;
    }

    .be-contact-hero-text {
        max-width: none;
        margin: 0 auto;
    }

    .be-contact-hero-image {
        flex: none;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        order: 2;
    }

    .be-contact-hero-title {
        font-size: 34px;
    }

    .be-contact-departments-inner {
        flex-direction: column;
        gap: 16px;
    }

    .be-contact-info-inner {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .be-contact-hero {
        padding: 64px 16px 56px;
    }

    .be-contact-hero-title {
        font-size: 28px;
    }

    .be-contact-hero-title br {
        display: none;
    }

    .be-contact-departments {
        padding: 56px 16px;
    }

    .be-contact-info-section {
        padding: 56px 16px;
    }

    .be-contact-form-section {
        padding: 56px 16px;
    }

    .be-contact-form-row {
        flex-direction: column;
        gap: 0;
    }

    .be-contact-map iframe {
        height: 280px;
    }

    .be-contact-form-section h2 {
        font-size: 26px;
    }
}

/* =========================================================
   AI Hosting Pricing Page (.be-pricing-*)
   ========================================================= */

/* Page-level overrides */
.has-pricing-page section#main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
}
.has-pricing-page section#main-body > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.has-pricing-page section#main-body > .container > .row {
    margin: 0;
}
.has-pricing-page .main-content {
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.has-pricing-page .header-lined {
    display: none;
}

/* ---------- Hero ---------- */
.be-pricing-hero {
    position: relative;
    background:
        linear-gradient(160deg, rgba(8, 2, 28, 0.88) 0%, rgba(22, 8, 72, 0.78) 50%, rgba(8, 2, 28, 0.88) 100%),
        url("../images/bg-home-img-1.jpg") center center / cover no-repeat;
    padding: 110px 40px 90px;
    text-align: center;
    overflow: hidden;
}
.be-pricing-hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
    pointer-events: none;
}
.be-pricing-hero-glow--left {
    top: -120px;
    left: -180px;
    background: radial-gradient(circle, #b23cff, transparent 70%);
}
.be-pricing-hero-glow--right {
    bottom: -140px;
    right: -180px;
    background: radial-gradient(circle, #4f46e5, transparent 70%);
}
.be-pricing-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}
.be-pricing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c084fc;
    margin-bottom: 20px;
}
.be-pricing-hero-title {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.12;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.be-pricing-hero-desc {
    margin: 0 auto 32px;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}
.be-pricing-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}
.be-pricing-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}
.be-pricing-hero-badge i {
    color: #c084fc;
    font-size: 14px;
}

/* ---------- Billing Toggle ---------- */
.be-pricing-toggle-section {
    padding: 48px 20px 10px;
    text-align: center;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.95), rgba(12, 4, 40, 0.98));
}
.be-pricing-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.be-pricing-toggle-label {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.3s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.be-pricing-toggle-label--active {
    color: #ffffff;
}
.be-pricing-toggle-save {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.be-pricing-toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.3s;
    padding: 0;
    outline: none;
}
.be-pricing-toggle-switch--on {
    background: rgba(178, 60, 255, 0.35);
    border-color: rgba(178, 60, 255, 0.5);
}
.be-pricing-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.be-pricing-toggle-switch--on .be-pricing-toggle-knob {
    transform: translateX(24px);
}

/* ---------- Product Groups ---------- */
.be-pricing-group {
    padding: 50px 20px 60px;
    background: linear-gradient(180deg, rgba(12, 4, 40, 0.98), rgba(8, 2, 28, 0.95));
}
.be-pricing-group-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.be-pricing-group-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 42px;
    letter-spacing: -0.01em;
}

/* ---------- Pricing Cards Grid ---------- */
.be-pricing-cards-grid {
    display: grid;
    gap: 24px;
    justify-items: center;
}
.be-pricing-cards-grid--1 {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}
.be-pricing-cards-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
}
.be-pricing-cards-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 400px));
    justify-content: center;
}
.be-pricing-cards-grid--4,
.be-pricing-cards-grid--5,
.be-pricing-cards-grid--6 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---------- Pricing Card ---------- */
.be-pricing-card {
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(15, 8, 46, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 44px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%;
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
    overflow: hidden;
}
.be-pricing-card:hover {
    transform: translateY(-6px);
    border-color: rgba(178, 60, 255, 0.40);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.32), 0 0 40px rgba(150, 87, 255, 0.15);
}
.be-pricing-card--featured {
    border-color: rgba(178, 60, 255, 0.50);
    background: rgba(22, 12, 60, 0.65);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.32), 0 0 48px rgba(150, 87, 255, 0.18);
    transform: scale(1.03);
    z-index: 2;
}
.be-pricing-card--featured:hover {
    transform: translateY(-6px) scale(1.035);
    box-shadow: 0 32px 72px rgba(0, 0, 0, 0.38), 0 0 60px rgba(150, 87, 255, 0.25);
}
.be-pricing-card-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    background: linear-gradient(90deg, #b23cff, #7b2fff);
}
.be-pricing-card-inner {
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    height: 100%;
}
.be-pricing-card--featured .be-pricing-card-inner {
    padding-top: 50px;
}
.be-pricing-card-head {
    margin-bottom: 20px;
}
.be-pricing-card-name {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}
.be-pricing-card-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.60);
}

/* ---------- Price Display ---------- */
.be-pricing-card-price {
    margin-bottom: 24px;
    min-height: 65px;
}
.be-pricing-price-row {
    display: none;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
}
.be-pricing-price--visible {
    display: flex !important;
}
.be-pricing-price-amount {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1;
}
.be-pricing-price-cycle {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}
.be-pricing-price-billed {
    width: 100%;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}

/* ---------- Features List ---------- */
.be-pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}
.be-pricing-card-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.be-pricing-card-features li:last-child {
    border-bottom: none;
}
.be-pricing-card-features li i {
    color: #a78bfa;
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ---------- Card Button ---------- */
.be-pricing-card-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #b23cff, #7b2fff);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 8px 24px rgba(130, 51, 255, 0.30);
    text-align: center;
}
.be-pricing-card-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(130, 51, 255, 0.40);
}
.be-pricing-card--featured .be-pricing-card-btn {
    background: linear-gradient(135deg, #e040fb, #b23cff);
    box-shadow: 0 8px 28px rgba(224, 64, 251, 0.30);
}

/* ---------- Why Choose Us ---------- */
.be-pricing-why {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.95) 0%, rgba(15, 5, 50, 0.98) 100%);
}
.be-pricing-why-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.be-pricing-why-title {
    margin: 0 0 12px;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}
.be-pricing-why-desc {
    margin: 0 auto 52px;
    max-width: 540px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
}
.be-pricing-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.be-pricing-why-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.45);
    padding: 32px 24px;
    text-align: left;
    transition: border-color 0.3s, transform 0.3s;
}
.be-pricing-why-card:hover {
    border-color: rgba(178, 60, 255, 0.28);
    transform: translateY(-3px);
}
.be-pricing-why-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(178, 60, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.be-pricing-why-icon i {
    font-size: 20px;
    color: #c084fc;
}
.be-pricing-why-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.be-pricing-why-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.62);
}

/* ---------- FAQ ---------- */
.be-pricing-faq {
    padding: 80px 20px 90px;
    background: linear-gradient(180deg, rgba(15, 5, 50, 0.98) 0%, rgba(8, 2, 28, 0.96) 100%);
}
.be-pricing-faq-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.be-pricing-faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c084fc;
    margin-bottom: 14px;
}
.be-pricing-faq-title {
    margin: 0 0 42px;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
}
.be-pricing-faq-list {
    text-align: left;
}
.be-pricing-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.be-pricing-faq-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.be-pricing-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 4px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
    outline: none;
}
.be-pricing-faq-q:hover {
    color: #c084fc;
}
.be-pricing-faq-icon {
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.40);
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform 0.3s, color 0.3s;
}
.be-pricing-faq-item--open .be-pricing-faq-icon {
    transform: rotate(45deg);
    color: #c084fc;
}
.be-pricing-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.be-pricing-faq-item--open .be-pricing-faq-a {
    max-height: 300px;
}
.be-pricing-faq-a-inner {
    padding: 0 4px 20px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
}

/* ---------- CTA ---------- */
.be-pricing-cta {
    position: relative;
    padding: 100px 20px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(15, 8, 46, 0.98));
}
.be-pricing-cta-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.20;
    pointer-events: none;
}
.be-pricing-cta-glow--left {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, #e040fb, transparent 70%);
}
.be-pricing-cta-glow--right {
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, #4f46e5, transparent 70%);
}
.be-pricing-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
}
.be-pricing-cta-title {
    margin: 0 0 16px;
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.be-pricing-cta-desc {
    margin: 0 auto 36px;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}
.be-pricing-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.be-pricing-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 36px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}
.be-pricing-cta-btn--primary {
    background: linear-gradient(135deg, #b23cff, #7b2fff);
    color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(130, 51, 255, 0.35);
}
.be-pricing-cta-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(130, 51, 255, 0.45);
}
.be-pricing-cta-btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
}
.be-pricing-cta-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-2px);
}
.be-pricing-cta-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
}
.be-pricing-cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}
.be-pricing-cta-trust i {
    color: #10b981;
    font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .be-pricing-hero {
        padding: 90px 24px 70px;
    }
    .be-pricing-hero-title {
        font-size: 36px;
    }
    .be-pricing-hero-title br {
        display: none;
    }
    .be-pricing-cards-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .be-pricing-card--featured {
        transform: none;
    }
    .be-pricing-card--featured:hover {
        transform: translateY(-6px);
    }
    .be-pricing-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .be-pricing-cta-title {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .be-pricing-hero {
        padding: 80px 16px 60px;
    }
    .be-pricing-hero-title {
        font-size: 28px;
    }
    .be-pricing-hero-desc {
        font-size: 15px;
    }
    .be-pricing-hero-badges {
        flex-direction: column;
        align-items: center;
    }
    .be-pricing-cards-grid--2,
    .be-pricing-cards-grid--3 {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
    .be-pricing-why-grid {
        grid-template-columns: 1fr;
    }
    .be-pricing-group {
        padding: 40px 16px 50px;
    }
    .be-pricing-group-title {
        font-size: 24px;
    }
    .be-pricing-price-amount {
        font-size: 34px;
    }
    .be-pricing-faq-title {
        font-size: 24px;
    }
    .be-pricing-cta {
        padding: 70px 16px;
    }
    .be-pricing-cta-title {
        font-size: 26px;
    }
    .be-pricing-cta-trust {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* =========================================================
   AI Infrastructure Page (.be-infra-*)
   ========================================================= */

/* Page-level overrides */
.has-infra-page section#main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
}
.has-infra-page section#main-body > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.has-infra-page section#main-body > .container > .row {
    margin: 0;
}
.has-infra-page .main-content {
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.has-infra-page .header-lined {
    display: none;
}

/* Common */
.be-infra-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c084fc;
    margin-bottom: 16px;
}
.be-infra-section-title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.be-infra-section-desc {
    margin: 0 auto 48px;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.60);
    text-align: center;
}
.be-infra-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.be-infra-btn--primary {
    background: linear-gradient(135deg, #b23cff, #7b2fff);
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(130, 51, 255, 0.30);
}
.be-infra-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(130, 51, 255, 0.42);
}
.be-infra-btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
}
.be-infra-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-2px);
}

/* ---------- Hero ---------- */
.be-infra-hero {
    position: relative;
    background:
        linear-gradient(160deg, rgba(8, 2, 28, 0.90) 0%, rgba(22, 8, 72, 0.78) 50%, rgba(8, 2, 28, 0.90) 100%),
        url("../images/bg-home-img-1.jpg") center center / cover no-repeat;
    padding: 110px 40px 100px;
    overflow: hidden;
}
.be-infra-hero-glow {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.22;
    pointer-events: none;
}
.be-infra-hero-glow--l {
    top: -150px;
    left: -200px;
    background: radial-gradient(circle, #b23cff, transparent 70%);
}
.be-infra-hero-glow--r {
    bottom: -180px;
    right: -200px;
    background: radial-gradient(circle, #4f46e5, transparent 70%);
}
.be-infra-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}
.be-infra-hero-text {
    flex: 1;
}
.be-infra-hero-title {
    margin: 0 0 20px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.be-infra-hero-desc {
    margin: 0 0 30px;
    max-width: 540px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}
.be-infra-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.be-infra-hero-visual {
    flex: 0 0 320px;
    text-align: center;
}
.be-infra-hero-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(130, 51, 255, 0.25));
}

/* ---------- Stats Bar ---------- */
.be-infra-stats {
    background: rgba(12, 4, 40, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 36px 20px;
}
.be-infra-stats-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;
}
.be-infra-stat {
    text-align: center;
}
.be-infra-stat-value {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.be-infra-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- Global Presence ---------- */
.be-infra-global {
    padding: 90px 20px 80px;
    background: linear-gradient(180deg, rgba(12, 4, 40, 0.98), rgba(8, 2, 28, 0.96));
    text-align: center;
}
.be-infra-global-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.be-infra-locations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 48px;
}
.be-infra-location-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    padding: 28px 20px;
    text-align: left;
    transition: border-color 0.3s, transform 0.3s;
}
.be-infra-location-card:hover {
    border-color: rgba(178, 60, 255, 0.30);
    transform: translateY(-3px);
}
.be-infra-location-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(178, 60, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.be-infra-location-icon i {
    font-size: 18px;
    color: #c084fc;
}
.be-infra-location-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.be-infra-location-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.22);
    margin-bottom: 10px;
}
.be-infra-location-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}
.be-infra-map-wrap {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 700px;
    margin: 0 auto;
}
.be-infra-map-img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    filter: brightness(0.7) saturate(1.2);
}
.be-infra-map-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    background: linear-gradient(0deg, rgba(8, 2, 28, 0.92), transparent);
}
.be-infra-map-overlay p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.70);
}

/* ---------- Compute Architecture ---------- */
.be-infra-compute {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(15, 5, 50, 0.98));
    text-align: center;
}
.be-infra-compute-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.be-infra-compute-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.be-infra-compute-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    padding: 30px 22px;
    text-align: left;
    transition: border-color 0.3s, transform 0.3s;
}
.be-infra-compute-card:hover {
    border-color: rgba(178, 60, 255, 0.30);
    transform: translateY(-4px);
}
.be-infra-compute-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(178, 60, 255, 0.14);
    color: #c084fc;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}
.be-infra-compute-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.be-infra-compute-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Multi-Layer Ecosystem ---------- */
.be-infra-ecosystem {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(15, 5, 50, 0.98), rgba(8, 2, 28, 0.96));
}
.be-infra-ecosystem-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 56px;
}
.be-infra-ecosystem-visual {
    flex: 1;
    min-width: 0;
}
.be-infra-ecosystem-text {
    flex: 1;
    min-width: 0;
}
.be-infra-ecosystem-text h2 {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}
.be-infra-ecosystem-text > p {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.60);
}

/* Eco Flow Diagram */
.be-infra-eco-flow {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.be-infra-eco-layer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.be-infra-eco-box {
    flex: 1;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(15, 8, 46, 0.60);
    padding: 18px 14px;
    text-align: center;
    transition: border-color 0.3s;
}
.be-infra-eco-box:hover {
    border-color: rgba(178, 60, 255, 0.30);
}
.be-infra-eco-box--highlight {
    border-color: rgba(178, 60, 255, 0.40);
    background: rgba(22, 12, 60, 0.70);
    box-shadow: 0 0 30px rgba(150, 87, 255, 0.12);
}
.be-infra-eco-box span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}
.be-infra-eco-box small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}
.be-infra-eco-arrow {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.20);
    font-size: 16px;
}

/* Eco List */
.be-infra-eco-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.be-infra-eco-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.be-infra-eco-list li:last-child {
    border-bottom: none;
}
.be-infra-eco-list li > i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(178, 60, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c084fc;
    font-size: 15px;
    margin-top: 2px;
}
.be-infra-eco-list li strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 3px;
}
.be-infra-eco-list li span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Reliability ---------- */
.be-infra-reliability {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(12, 4, 40, 0.98));
    text-align: center;
}
.be-infra-reliability-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.be-infra-rel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.be-infra-rel-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    padding: 32px 24px;
    text-align: left;
    position: relative;
    transition: border-color 0.3s, transform 0.3s;
}
.be-infra-rel-card:hover {
    border-color: rgba(178, 60, 255, 0.30);
    transform: translateY(-4px);
}
.be-infra-rel-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(178, 60, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.be-infra-rel-icon i {
    font-size: 19px;
    color: #c084fc;
}
.be-infra-rel-num {
    position: absolute;
    top: 22px;
    right: 22px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
}
.be-infra-rel-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.be-infra-rel-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Security ---------- */
.be-infra-security {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(12, 4, 40, 0.98), rgba(8, 2, 28, 0.96));
}
.be-infra-security-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 56px;
}
.be-infra-security-text {
    flex: 1;
}
.be-infra-security-text h2 {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}
.be-infra-security-text > p {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.60);
}
.be-infra-security-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.be-infra-security-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.be-infra-security-list li:last-child {
    border-bottom: none;
}
.be-infra-security-list li > i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(178, 60, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c084fc;
    font-size: 15px;
    margin-top: 2px;
}
.be-infra-security-list li strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 3px;
}
.be-infra-security-list li span {
    display: block;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}
.be-infra-security-visual {
    flex: 0 0 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.be-infra-security-badge {
    border-radius: 20px;
    border: 1px solid rgba(178, 60, 255, 0.28);
    background: rgba(22, 12, 60, 0.60);
    padding: 48px 36px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 0 40px rgba(150, 87, 255, 0.10);
}
.be-infra-security-badge-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(178, 60, 255, 0.20), rgba(79, 70, 229, 0.20));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.be-infra-security-badge-icon i {
    font-size: 26px;
    color: #c084fc;
}
.be-infra-security-badge h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
.be-infra-security-badge p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Technology ---------- */
.be-infra-tech {
    padding: 80px 20px 70px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(15, 5, 50, 0.98));
    text-align: center;
}
.be-infra-tech-inner {
    max-width: 900px;
    margin: 0 auto;
}
.be-infra-tech-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}
.be-infra-tech-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.3s, background 0.3s;
}
.be-infra-tech-tag:hover {
    border-color: rgba(178, 60, 255, 0.35);
    background: rgba(178, 60, 255, 0.08);
}
.be-infra-tech-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.45);
    max-width: 780px;
    margin: 0 auto;
}

/* ---------- CTA Box ---------- */
.be-infra-cta {
    position: relative;
    padding: 60px 20px;
    background: linear-gradient(180deg, rgba(15, 5, 50, 0.98), rgba(8, 2, 28, 0.96));
    overflow: hidden;
}
.be-infra-cta-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.15;
    pointer-events: none;
}
.be-infra-cta-glow--l {
    top: -200px;
    left: -200px;
    background: radial-gradient(circle, #e040fb, transparent 70%);
}
.be-infra-cta-glow--r {
    bottom: -200px;
    right: -200px;
    background: radial-gradient(circle, #4f46e5, transparent 70%);
}
.be-infra-cta-box {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 20px;
    border: 1px solid rgba(178, 60, 255, 0.25);
    background: linear-gradient(135deg, rgba(22, 12, 60, 0.70), rgba(15, 8, 46, 0.60));
    padding: 52px 48px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.be-infra-cta-text {
    flex: 1;
}
.be-infra-cta-text h2 {
    margin: 0 0 12px;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
}
.be-infra-cta-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.60);
}
.be-infra-cta-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Bottom Hero ---------- */
.be-infra-bottom {
    padding: 100px 20px;
    background:
        linear-gradient(180deg, rgba(8, 2, 28, 0.96) 0%, rgba(15, 8, 46, 0.98) 100%),
        url("../images/bg-home-img-1.jpg") center bottom / cover no-repeat;
    text-align: center;
}
.be-infra-bottom-inner {
    max-width: 720px;
    margin: 0 auto;
}
.be-infra-bottom-title {
    margin: 0 0 20px;
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.be-infra-bottom-desc {
    margin: 0 auto 32px;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
}
.be-infra-bottom-trust {
    margin: 32px auto 0;
    max-width: 620px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45);
}
.be-infra-bottom-trust i {
    color: #c084fc;
    margin-right: 6px;
}
.be-infra-bottom-trust strong {
    color: rgba(255, 255, 255, 0.80);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .be-infra-hero {
        padding: 90px 24px 70px;
    }
    .be-infra-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .be-infra-hero-desc {
        max-width: 100%;
    }
    .be-infra-hero-btns {
        justify-content: center;
    }
    .be-infra-hero-visual {
        flex: 0 0 auto;
        max-width: 280px;
        margin: 0 auto;
    }
    .be-infra-hero-title {
        font-size: 36px;
    }
    .be-infra-hero-title br {
        display: none;
    }
    .be-infra-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .be-infra-compute-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .be-infra-ecosystem-inner {
        flex-direction: column;
    }
    .be-infra-eco-layer {
        flex-wrap: wrap;
        justify-content: center;
    }
    .be-infra-security-inner {
        flex-direction: column;
    }
    .be-infra-security-visual {
        flex: 0 0 auto;
        width: 100%;
        max-width: 340px;
    }
    .be-infra-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 40px 28px;
    }
    .be-infra-cta-actions {
        align-items: center;
    }
    .be-infra-rel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .be-infra-section-title {
        font-size: 28px;
    }
    .be-infra-bottom-title {
        font-size: 30px;
    }
    .be-infra-bottom-title br {
        display: none;
    }
}

@media (max-width: 767px) {
    .be-infra-hero {
        padding: 80px 16px 60px;
    }
    .be-infra-hero-title {
        font-size: 28px;
    }
    .be-infra-locations-grid {
        grid-template-columns: 1fr;
    }
    .be-infra-compute-grid {
        grid-template-columns: 1fr;
    }
    .be-infra-eco-layer {
        flex-direction: column;
    }
    .be-infra-eco-arrow {
        transform: rotate(90deg);
    }
    .be-infra-rel-grid {
        grid-template-columns: 1fr;
    }
    .be-infra-stats-inner {
        flex-direction: column;
        gap: 20px;
    }
    .be-infra-section-title {
        font-size: 24px;
    }
    .be-infra-bottom-title {
        font-size: 26px;
    }
    .be-infra-cta-text h2 {
        font-size: 22px;
    }
    .be-infra-tech-tags {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================================
   About Us Page (.be-about-*)
   ========================================================= */

/* Page-level overrides */
.has-about-page section#main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
}
.has-about-page section#main-body > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.has-about-page section#main-body > .container > .row {
    margin: 0;
}
.has-about-page .main-content {
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.has-about-page .header-lined {
    display: none;
}

/* Common */
.be-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c084fc;
    margin-bottom: 16px;
}
.be-about-section-title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-align: center;
}
.be-about-section-desc {
    margin: 0 auto 48px;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.58);
    text-align: center;
}
.be-about-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}
.be-about-btn--primary {
    background: linear-gradient(135deg, #b23cff, #7b2fff);
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(130, 51, 255, 0.30);
}
.be-about-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(130, 51, 255, 0.42);
}
.be-about-btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
}
.be-about-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-2px);
}

/* ---------- Hero ---------- */
.be-about-hero {
    position: relative;
    background:
        linear-gradient(160deg, rgba(8, 2, 28, 0.90) 0%, rgba(22, 8, 72, 0.78) 50%, rgba(8, 2, 28, 0.90) 100%),
        url("../images/bg-home-img-1.jpg") center center / cover no-repeat;
    padding: 110px 40px 100px;
    overflow: hidden;
}
.be-about-hero-glow {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.22;
    pointer-events: none;
}
.be-about-hero-glow--l { top: -150px; left: -200px; background: radial-gradient(circle, #b23cff, transparent 70%); }
.be-about-hero-glow--r { bottom: -180px; right: -200px; background: radial-gradient(circle, #4f46e5, transparent 70%); }
.be-about-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}
.be-about-hero-text { flex: 1; }
.be-about-hero-title {
    margin: 0 0 24px;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.be-about-hero-desc {
    margin: 0 0 18px;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
}
.be-about-hero-visual {
    flex: 0 0 300px;
    text-align: center;
}
.be-about-hero-img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(130, 51, 255, 0.25));
}

/* ---------- Our Story ---------- */
.be-about-story {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(12, 4, 40, 0.98), rgba(8, 2, 28, 0.96));
    text-align: center;
}
.be-about-story-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.be-about-story-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
}
.be-about-story-col p {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.62);
}
.be-about-story-col p:last-child {
    margin-bottom: 0;
}

/* ---------- Mission & Vision ---------- */
.be-about-mv {
    padding: 60px 20px 80px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(15, 5, 50, 0.98));
}
.be-about-mv-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.be-about-mv-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    min-height: 420px;
}
.be-about-mv-card-bg {
    position: absolute;
    inset: 0;
    background: url("../images/bg-home-img-1.jpg") center center / cover no-repeat;
    opacity: 0.18;
}
.be-about-mv-card--mission {
    background: linear-gradient(135deg, rgba(22, 12, 60, 0.80), rgba(120, 50, 200, 0.25));
}
.be-about-mv-card--vision {
    background: linear-gradient(135deg, rgba(15, 8, 46, 0.80), rgba(79, 70, 229, 0.25));
}
.be-about-mv-card-content {
    position: relative;
    z-index: 2;
    padding: 40px 32px;
}
.be-about-mv-card-content h2 {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
}
.be-about-mv-card-content > p {
    margin: 0 0 22px;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.68);
}
.be-about-mv-card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.be-about-mv-card-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}
.be-about-mv-card-content ul li i {
    color: #a78bfa;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ---------- Core Values ---------- */
.be-about-values {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(15, 5, 50, 0.98), rgba(8, 2, 28, 0.96));
    text-align: center;
}
.be-about-values-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.be-about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.be-about-value-card {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    padding: 32px 24px;
    text-align: left;
    transition: border-color 0.3s, transform 0.3s;
}
.be-about-value-card:hover {
    border-color: rgba(178, 60, 255, 0.28);
    transform: translateY(-4px);
}
.be-about-value-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(178, 60, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.be-about-value-icon i {
    font-size: 20px;
    color: #c084fc;
}
.be-about-value-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.be-about-value-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Stats ---------- */
.be-about-stats {
    padding: 60px 20px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(12, 4, 40, 0.98));
}
.be-about-stats-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.be-about-stat {
    text-align: center;
    min-width: 140px;
}
.be-about-stat-value {
    display: block;
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.be-about-stat-plus {
    font-size: 28px;
    color: #c084fc;
}
.be-about-stat-label {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.48);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.be-about-stat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.10);
}

/* ---------- Principles ---------- */
.be-about-principles {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(12, 4, 40, 0.98), rgba(8, 2, 28, 0.96));
    text-align: center;
}
.be-about-principles-inner {
    max-width: 800px;
    margin: 0 auto;
}
.be-about-principles-list {
    text-align: left;
    margin-top: 8px;
}
.be-about-principle {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.be-about-principle:last-child {
    border-bottom: none;
}
.be-about-principle-num {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(178, 60, 255, 0.10);
    border: 1px solid rgba(178, 60, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #c084fc;
    margin-top: 2px;
}
.be-about-principle-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.be-about-principle-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.58);
}

/* ---------- Timeline ---------- */
.be-about-timeline {
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(15, 5, 50, 0.98));
    text-align: center;
}
.be-about-timeline-inner {
    max-width: 900px;
    margin: 0 auto;
}
.be-about-timeline-track {
    position: relative;
    text-align: left;
    padding-left: 40px;
}
.be-about-timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 60, 255, 0.40), rgba(178, 60, 255, 0.08));
}
.be-about-tl-item {
    position: relative;
    padding-bottom: 40px;
}
.be-about-tl-item:last-child {
    padding-bottom: 0;
}
.be-about-tl-dot {
    position: absolute;
    left: -33px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #b23cff;
    border: 3px solid rgba(8, 2, 28, 0.98);
    box-shadow: 0 0 12px rgba(178, 60, 255, 0.40);
}
.be-about-tl-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    padding: 24px 28px;
    transition: border-color 0.3s, transform 0.3s;
}
.be-about-tl-card:hover {
    border-color: rgba(178, 60, 255, 0.25);
    transform: translateX(4px);
}
.be-about-tl-year {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c084fc;
    background: rgba(178, 60, 255, 0.12);
    border: 1px solid rgba(178, 60, 255, 0.22);
    margin-bottom: 12px;
}
.be-about-tl-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
}
.be-about-tl-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.58);
}

/* ---------- Global Presence ---------- */
.be-about-presence {
    padding: 80px 20px;
    background: linear-gradient(180deg, #0b001a 0%, #120026 45%, #1a0033 100%);
}
.be-about-presence--network .be-about-presence-inner {
    align-items: stretch;
}
.be-about-presence-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 52px;
}
.be-about-presence-visual {
    flex: 0 1 520px;
    min-width: 0;
}
.be-about-presence-img-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(178, 60, 255, 0.22);
    background: radial-gradient(ellipse at 50% 20%, rgba(120, 40, 200, 0.25), transparent 55%),
        linear-gradient(160deg, rgba(20, 5, 45, 0.95), rgba(8, 2, 24, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.be-about-presence-img {
    width: 100%;
    height: auto;
    min-height: 280px;
    max-height: 420px;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: saturate(1.15) brightness(0.98);
}
.be-about-presence-img-badge {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(8, 2, 28, 0.72);
    border: 1px solid rgba(178, 60, 255, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.be-about-presence-text {
    flex: 1;
}
.be-about-presence-text p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
}
.be-about-presence-footnote {
    margin: 32px 0 0;
    padding-top: 4px;
    font-size: 13px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.52);
    max-width: 540px;
}
.be-about-btn--presence-gradient {
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    color: #ffffff !important;
    text-decoration: none !important;
    border: none;
    background: linear-gradient(90deg, #e040fb 0%, #7c3aed 45%, #4f46e5 100%);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.be-about-btn--presence-gradient:hover,
.be-about-btn--presence-gradient:focus {
    color: #ffffff !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.45);
}

/* ---------- CTA ---------- */
.be-about-cta {
    position: relative;
    padding: 90px 20px;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96), rgba(15, 8, 46, 0.98));
    overflow: hidden;
}
.be-about-cta-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.18;
    pointer-events: none;
}
.be-about-cta-glow--l { top: -200px; left: -200px; background: radial-gradient(circle, #e040fb, transparent 70%); }
.be-about-cta-glow--r { bottom: -200px; right: -200px; background: radial-gradient(circle, #4f46e5, transparent 70%); }
.be-about-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
}
.be-about-cta-visual {
    flex: 0 0 300px;
    text-align: center;
}
.be-about-cta-img {
    max-width: 100%;
    max-height: 360px;
    filter: drop-shadow(0 16px 40px rgba(130, 51, 255, 0.20));
}
.be-about-cta-content {
    flex: 1;
}
.be-about-cta-content h2 {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
}
.be-about-cta-content p {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.62);
    max-width: 520px;
}
.be-about-cta-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .be-about-hero {
        padding: 90px 24px 70px;
    }
    .be-about-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .be-about-hero-desc {
        max-width: 100%;
    }
    .be-about-hero-visual {
        flex: 0 0 auto;
        max-width: 260px;
        margin: 0 auto;
    }
    .be-about-hero-title {
        font-size: 38px;
    }
    .be-about-story-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .be-about-mv-inner {
        grid-template-columns: 1fr;
    }
    .be-about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .be-about-presence-inner {
        flex-direction: column;
    }
    .be-about-presence-img-wrap {
        flex: 0 0 auto;
        width: 100%;
        max-width: 600px;
    }
    .be-about-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    .be-about-cta-visual {
        flex: 0 0 auto;
        max-width: 240px;
    }
    .be-about-cta-content p {
        max-width: 100%;
    }
    .be-about-cta-btns {
        justify-content: center;
    }
    .be-about-section-title {
        font-size: 28px;
    }
    .be-about-stat-divider {
        display: none;
    }
}

@media (max-width: 767px) {
    .be-about-hero {
        padding: 80px 16px 60px;
    }
    .be-about-hero-title {
        font-size: 30px;
    }
    .be-about-values-grid {
        grid-template-columns: 1fr;
    }
    .be-about-stats-inner {
        gap: 32px;
    }
    .be-about-stat-value {
        font-size: 36px;
    }
    .be-about-timeline-track {
        padding-left: 32px;
    }
    .be-about-tl-dot {
        left: -25px;
    }
    .be-about-section-title {
        font-size: 24px;
    }
    .be-about-principle {
        flex-direction: column;
        gap: 14px;
    }
    .be-about-presence-img {
        min-height: 200px;
        max-height: 280px;
    }
    .be-about-presence-img-badge {
        white-space: normal;
        text-align: center;
        font-size: 10px;
        line-height: 1.3;
        max-width: 90%;
    }
    .be-about-presence {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
    .be-about-btn--presence-gradient {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }
    .be-about-cta-content h2 {
        font-size: 26px;
    }
}

/* =========================================================
   Announcements Page (.be-ann-*)
   ========================================================= */

/* Page-level overrides */
.has-announcements-page section#main-body {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
}
.has-announcements-page section#main-body > .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.has-announcements-page section#main-body > .container > .row {
    margin: 0;
}
.has-announcements-page .main-content {
    padding: 0 !important;
    margin-bottom: 0 !important;
}
.has-announcements-page .header-lined {
    display: none;
}
.has-announcements-page .sidebar {
    display: none !important;
}
.has-announcements-page .main-content {
    width: 100% !important;
    float: none !important;
}

/* Page wrapper */
.be-ann-page {
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96) 0%, rgba(12, 4, 40, 0.98) 50%, rgba(8, 2, 28, 0.96) 100%);
    padding: 80px 20px 100px;
    min-height: 60vh;
}
.be-ann-inner {
    max-width: 860px;
    margin: 0 auto;
}
.be-ann-inner--detail {
    max-width: 800px;
}

/* Header */
.be-ann-header {
    text-align: center;
    margin-bottom: 56px;
}
.be-ann-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c084fc;
    margin-bottom: 16px;
}
.be-ann-title {
    margin: 0 0 12px;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.be-ann-subtitle {
    margin: 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Announcement Cards ---------- */
.be-ann-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.be-ann-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.be-ann-card:hover {
    border-color: rgba(178, 60, 255, 0.30);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 30px rgba(150, 87, 255, 0.08);
}
.be-ann-card-inner {
    padding: 32px 34px;
}
.be-ann-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.be-ann-card-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}
.be-ann-card-date i {
    color: #c084fc;
    font-size: 13px;
}
.be-ann-card-edit {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.40) !important;
    text-decoration: none !important;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.2s, color 0.2s;
}
.be-ann-card-edit:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff !important;
}
.be-ann-card-title {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
.be-ann-card-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s;
}
.be-ann-card-title a:hover {
    color: #c084fc !important;
}
.be-ann-card-text {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.60);
    margin-bottom: 20px;
}
.be-ann-card-text p {
    margin: 0 0 12px;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.be-ann-card-text p:last-child {
    margin-bottom: 0;
}
.be-ann-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #c084fc !important;
    text-decoration: none !important;
    transition: gap 0.2s, color 0.2s;
}
.be-ann-card-btn:hover {
    gap: 12px;
    color: #d4a5ff !important;
}
.be-ann-card-social {
    padding: 0 34px 20px;
}

/* ---------- Empty State ---------- */
.be-ann-empty {
    text-align: center;
    padding: 80px 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 8, 46, 0.35);
}
.be-ann-empty-icon {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
}
.be-ann-empty h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.70);
}
.be-ann-empty p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}

/* ---------- Pagination ---------- */
.be-ann-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}
.be-ann-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.70) !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.be-ann-page-btn:hover {
    background: rgba(178, 60, 255, 0.12);
    border-color: rgba(178, 60, 255, 0.30);
    color: #ffffff !important;
}
.be-ann-page-btn--active {
    background: linear-gradient(135deg, #b23cff, #7b2fff) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(130, 51, 255, 0.30);
}

/* ---------- Detail View ---------- */
.be-ann-detail-header {
    margin-bottom: 32px;
}
.be-ann-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    padding: 8px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.2s, color 0.2s;
}
.be-ann-back:hover {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff !important;
}
.be-ann-detail {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.50);
    padding: 40px 42px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.be-ann-detail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.be-ann-detail-body {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.72);
}
.be-ann-detail-body h1,
.be-ann-detail-body h2,
.be-ann-detail-body h3,
.be-ann-detail-body h4 {
    color: #ffffff;
    margin-top: 28px;
    margin-bottom: 12px;
}
.be-ann-detail-body p {
    margin: 0 0 16px;
    color: inherit;
}
.be-ann-detail-body a {
    color: #c084fc;
}
.be-ann-detail-body a:hover {
    color: #d4a5ff;
}
.be-ann-detail-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 16px 0;
}
.be-ann-detail-body ul,
.be-ann-detail-body ol {
    padding-left: 24px;
    margin-bottom: 16px;
}
.be-ann-detail-body li {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.65);
}
.be-ann-detail-body blockquote {
    border-left: 3px solid #c084fc;
    padding: 12px 20px;
    margin: 20px 0;
    background: rgba(178, 60, 255, 0.06);
    border-radius: 0 10px 10px 0;
    color: rgba(255, 255, 255, 0.70);
    font-style: italic;
}
.be-ann-detail-body code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: #e0b0ff;
}
.be-ann-detail-body pre {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    overflow-x: auto;
    margin: 16px 0;
}
.be-ann-detail-body pre code {
    background: none;
    padding: 0;
}
.be-ann-detail-share {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.be-ann-detail-comments {
    margin-top: 28px;
}
.be-ann-detail-footer {
    margin-top: 32px;
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .be-ann-page {
        padding: 60px 16px 80px;
    }
    .be-ann-title {
        font-size: 30px;
    }
    .be-ann-card-inner {
        padding: 24px 22px;
    }
    .be-ann-card-title {
        font-size: 19px;
    }
    .be-ann-detail {
        padding: 28px 22px;
    }
    .be-ann-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* =========================================================
   Knowledgebase (.has-kb-page / .be-kb-*)
   ========================================================= */

.has-kb-page section#main-body {
    padding: 30px 0 0 !important;
    margin: 0 !important;
    background: linear-gradient(180deg, rgba(8, 2, 28, 0.96) 0%, rgba(12, 4, 40, 0.98) 50%, rgba(8, 2, 28, 0.96) 100%) !important;
    background-color: transparent !important;
}
.has-kb-page section#main-body > .container {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
}
.has-kb-page section#main-body > .container > .row {
    margin-left: -12px;
    margin-right: -12px;
}
.has-kb-page .main-content {
    padding: 48px 12px 80px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}
.has-kb-page .sidebar {
    padding: 48px 12px 80px !important;
    /* Panels oben bündeln — verhindert künstlichen Zwischenraum bei hoher Spalte */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
}
.has-kb-page .sidebar .panel,
.has-kb-page .sidebar .panel.panel-sidebar {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(15, 8, 46, 0.52);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    flex: 0 0 auto !important;
    overflow: hidden;
}
.has-kb-page .sidebar .panel:last-child {
    margin-bottom: 0 !important;
}
.has-kb-page .sidebar .panel + .panel {
    margin-top: 0 !important;
}

/* Desktop: Mobile-Select-Duplikate (sidebar.tpl) — komplett aus dem Layout nehmen */
.has-kb-page .sidebar > .panel.hidden-lg,
.has-kb-page .sidebar > .panel.hidden-md {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}
.has-kb-page .sidebar .panel-heading {
    background: linear-gradient(135deg, rgba(120, 50, 200, 0.22), rgba(79, 70, 229, 0.20)) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 18px !important;
}
.has-kb-page .sidebar .panel-title {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
}
.has-kb-page .sidebar .panel-title .fa-chevron-up {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}
.has-kb-page .sidebar .panel-body {
    background: rgba(0, 0, 0, 0.12);
    color: rgba(255, 255, 255, 0.65);
    border: none !important;
    font-size: 13px;
}
.has-kb-page .sidebar .list-group {
    border-radius: 0;
}
.has-kb-page .sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    padding: 12px 18px !important;
    font-size: 13.5px;
    transition: background 0.2s, color 0.2s;
}
.has-kb-page .sidebar .list-group-item:first-child {
    border-top: none !important;
}
.has-kb-page .sidebar .list-group-item:hover {
    background: rgba(178, 60, 255, 0.08) !important;
    color: #ffffff !important;
}
.has-kb-page .sidebar .list-group-item.active {
    background: rgba(178, 60, 255, 0.14) !important;
    color: #ffffff !important;
    border-left: 3px solid #c084fc !important;
    padding-left: 15px !important;
}
.has-kb-page .sidebar .list-group-item .badge {
    background: rgba(178, 60, 255, 0.25);
    color: #fff;
}
.has-kb-page .sidebar .panel.hidden-lg .panel-heading,
.has-kb-page .sidebar .panel.hidden-md .panel-heading {
    background: linear-gradient(135deg, rgba(120, 50, 200, 0.22), rgba(79, 70, 229, 0.20)) !important;
    border: none !important;
}
.has-kb-page .sidebar .panel.hidden-lg .form-control,
.has-kb-page .sidebar .panel.hidden-md .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-radius: 10px !important;
}
.has-kb-page .header-lined {
    background: transparent !important;
    border: none !important;
    padding: 0 0 8px !important;
    margin-bottom: 28px !important;
}
.has-kb-page .header-lined h1 {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    margin: 0 0 12px !important;
}
.has-kb-page .header-lined h1 small {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 500;
    font-size: 16px !important;
}
.has-kb-page .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px;
}
.has-kb-page .breadcrumb > li > a {
    color: #c084fc !important;
}
.has-kb-page .breadcrumb > li.active {
    color: rgba(255, 255, 255, 0.55);
}
.has-kb-page .breadcrumb > li + li:before {
    color: rgba(255, 255, 255, 0.25);
}

/* Main wrap */
.be-kb-wrap {
    max-width: 100%;
}
/* Inhalt unter Titel/Breadcrumb leicht nach unten (optischer Abstand) */
.has-kb-page .main-content > .be-kb-wrap {
    margin-top: 10px;
}

/* Section titles */
.be-kb-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.be-kb-section-title--sm {
    font-size: 18px;
    margin-top: 8px;
}

/* Category cards */
.be-kb-cats .col-sm-4 {
    margin-bottom: 20px;
}
.be-kb-cat-card {
    height: 100%;
    padding: 22px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.45);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.be-kb-cat-card:hover {
    border-color: rgba(178, 60, 255, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), 0 0 28px rgba(150, 87, 255, 0.08);
}
.be-kb-cat-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    text-decoration: none !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 15px;
}
.be-kb-cat-link:hover {
    color: #d4a5ff !important;
}
.be-kb-cat-icon {
    color: #c084fc;
    font-size: 18px;
}
.be-kb-cat-count,
.be-kb-cat-badge {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(178, 60, 255, 0.18);
    border: 1px solid rgba(178, 60, 255, 0.28);
    color: #e9d5ff;
}
.be-kb-cat-desc {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.52);
}
.be-kb-edit {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4) !important;
}
.be-kb-edit:hover {
    color: #c084fc !important;
}

/* Article list */
.be-kb-articles {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.35);
    overflow: hidden;
}
.be-kb-article-row {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.be-kb-article-row:last-child {
    border-bottom: none;
}
.be-kb-article-link {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff !important;
    text-decoration: none !important;
}
.be-kb-article-link:hover {
    color: #c084fc !important;
}
.be-kb-article-link i {
    color: #a78bfa;
    margin-right: 8px;
}
.be-kb-article-row p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.48);
}

/* Alerts */
.has-kb-page .be-kb-alert-wrap .alert,
.has-kb-page .alert {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: rgba(178, 60, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
.has-kb-page .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
}
.has-kb-page .alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.28) !important;
}

/* Article view */
.be-kb-wrap--article {
    padding-bottom: 20px;
}
.be-kb-article-head {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.be-kb-article-head::after {
    content: "";
    display: table;
    clear: both;
}
.be-kb-article-actions {
    float: right;
}
.be-kb-print {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7) !important;
    transition: background 0.2s, color 0.2s;
}
.be-kb-print:hover {
    background: rgba(178, 60, 255, 0.15);
    color: #ffffff !important;
}
.be-kb-article-h1 {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 40px 0 0;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.be-kb-article-body {
    font-size: 15px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
}
.be-kb-article-body h1,
.be-kb-article-body h2,
.be-kb-article-body h3,
.be-kb-article-body h4 {
    color: #ffffff;
    margin-top: 28px;
    margin-bottom: 12px;
}
.be-kb-article-body a {
    color: #c084fc;
}
.be-kb-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.be-kb-meta {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}
.be-kb-meta li {
    margin-bottom: 8px;
}
.be-kb-meta i {
    color: #c084fc;
    margin-right: 8px;
}
.be-kb-rate {
    margin-top: 28px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 8, 46, 0.45);
}
.be-kb-rate-p {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}
.be-kb-rate-yes,
.be-kb-rate-no {
    margin: 8px 8px 0 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
.be-kb-rate-yes:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
.be-kb-rate-no:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}
.be-kb-related {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.be-kb-btn-secondary {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

@media (max-width: 991px) {
    .has-kb-page .sidebar {
        padding-bottom: 24px !important;
    }
    .has-kb-page .main-content {
        padding-top: 16px !important;
    }
}

@media (max-width: 767px) {
    .be-kb-article-h1 {
        font-size: 22px;
        margin-right: 0;
        padding-top: 8px;
    }
    .be-kb-article-actions {
        float: none;
        margin-bottom: 12px;
    }
}

/* Cart – page background identical to homepage */
section#main-body:has(#order-standard_cart) {
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.10), transparent 45%),
        #0b001a !important;
}

/* Cart – kill every white background, force dark (layout untouched) */
#order-standard_cart,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .tab-pane,
#order-standard_cart table,
#order-standard_cart table thead,
#order-standard_cart table tbody,
#order-standard_cart table tr,
#order-standard_cart .well,
#order-standard_cart .logincontainer,
#order-standard_cart .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
}

/* Panels – nuclear: kill ALL white backgrounds inside #order-standard_cart */
#order-standard_cart .panel,
#order-standard_cart .panel-default,
#order-standard_cart .panel-sidebar,
#order-standard_cart div.panel,
#order-standard_cart div.panel-default {
    background: rgba(15, 8, 46, 0.60) !important;
    background-color: rgba(15, 8, 46, 0.60) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.20) !important;
    overflow: hidden;
}
#order-standard_cart .panel-heading,
#order-standard_cart .panel-default > .panel-heading,
#order-standard_cart .panel-sidebar > .panel-heading,
#order-standard_cart div.panel > .panel-heading {
    background: rgba(120, 50, 200, 0.22) !important;
    background-color: rgba(120, 50, 200, 0.22) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
#order-standard_cart .panel-body,
#order-standard_cart .panel .panel-body,
#order-standard_cart .panel-default .panel-body,
#order-standard_cart div.panel .panel-body,
#order-standard_cart .panel-default > .panel-heading + .panel-collapse > .panel-body,
#order-standard_cart .panel-default > .panel-footer + .panel-collapse > .panel-body {
    background: transparent !important;
    background-color: transparent !important;
}
#order-standard_cart .panel-footer {
    background: rgba(0,0,0,0.12) !important;
    background-color: rgba(0,0,0,0.12) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Order Summary box – visible border */
#order-standard_cart .order-summary,
#order-standard_cart .pull-right > .panel,
#order-standard_cart .col-md-4 > .panel,
#order-standard_cart .col-sm-4 > .panel {
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Catch-all: no element inside cart may have white bg */
#order-standard_cart *:not(.btn):not(.btn-success):not(.badge):not(.panel):not(.panel-default):not(.panel-sidebar):not(.panel-heading) {
    background-color: transparent !important;
}
#order-standard_cart .panel,
#order-standard_cart .panel-default,
#order-standard_cart .panel-sidebar {
    background-color: rgba(15, 8, 46, 0.60) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
}
#order-standard_cart .panel-heading,
#order-standard_cart .panel-default > .panel-heading {
    background-color: rgba(120, 50, 200, 0.22) !important;
}
#order-standard_cart table thead th {
    background-color: rgba(120, 50, 200, 0.22) !important;
}
#order-standard_cart .form-control,
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea {
    background-color: rgba(255,255,255,0.05) !important;
}
#order-standard_cart .input-group-addon {
    background-color: rgba(255,255,255,0.05) !important;
}

/* List-group items (sidebar links) */
#order-standard_cart .list-group-item {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.78) !important;
}
#order-standard_cart .list-group-item:hover {
    background: rgba(178, 60, 255, 0.08) !important;
}
#order-standard_cart .list-group-item.active {
    background: rgba(178, 60, 255, 0.14) !important;
    border-left: 3px solid #c084fc !important;
    color: #fff !important;
}

/* Tabs */
#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li > a {
    color: rgba(255,255,255,0.55) !important;
    background: transparent !important;
}
#order-standard_cart .view-cart-tabs .nav-tabs > li.active > a {
    color: #fff !important;
    background: transparent !important;
    border-bottom: 2px solid #c084fc !important;
}

/* Table header & cells */
#order-standard_cart table thead th {
    background: rgba(120, 50, 200, 0.22) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.08) !important;
}
#order-standard_cart table tbody td {
    background: transparent !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* Forms */
#order-standard_cart .field,
#order-standard_cart .form-control,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart textarea,
#order-standard_cart select {
    height: 50px;
    background: rgba(255,255,255,0.05) !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #fff !important;
}
#order-standard_cart .form-control::placeholder,
#order-standard_cart input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}
#order-standard_cart .prepend-icon .field-icon {
    height: 50px;
    line-height: 50px;
    color: rgba(255,255,255,0.4) !important;
}
#order-standard_cart .input-group-addon {
    background: rgba(255,255,255,0.05) !important;
    background-color: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.5) !important;
}
#order-standard_cart label {
    font-size: 15px;
    color: rgba(255,255,255,0.70) !important;
}

/* Buttons */
#order-standard_cart .btn-success {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
}
#order-standard_cart .btn-default {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
#order-standard_cart .default-captcha {
    background-color: rgba(120,50,200,0.22) !important;
    color: #fff !important;
}
#order-standard_cart .captcha-container img {
    margin-top: -2px !important;
    height: 35px;
}

/* ALL text = white */
#order-standard_cart,
#order-standard_cart h1, #order-standard_cart h2, #order-standard_cart h3, #order-standard_cart h4,
#order-standard_cart p, #order-standard_cart span, #order-standard_cart div,
#order-standard_cart td, #order-standard_cart th, #order-standard_cart li,
#order-standard_cart strong, #order-standard_cart small,
#order-standard_cart .panel-title {
    color: rgba(255,255,255,0.85) !important;
}

/* Links */
#order-standard_cart a { color: #c084fc !important; }
#order-standard_cart a:hover { color: #e0b0ff !important; }
#order-standard_cart a.btn { color: #fff !important; }

/* Checkout – professionelles, modernes Form-Layout (ohne versetzte Linien) */
#order-standard_cart .checkout-view {
    max-width: 1040px;
}

#order-standard_cart .checkout-view .field-container,
#order-standard_cart .checkout-view fieldset {
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 16px 18px !important;
    margin: 16px 0 !important;
}

#order-standard_cart .checkout-view fieldset > legend,
#order-standard_cart .checkout-view .sub-heading span {
    display: inline-block !important;
    margin: 0 0 10px !important;
    padding: 0 8px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

#order-standard_cart .checkout-view hr {
    border: 0 !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    margin: 18px 0 !important;
}

#order-standard_cart .checkout-view .alert-danger,
#order-standard_cart .checkout-view .alert-warning {
    border: 1px solid rgba(255, 120, 160, 0.45) !important;
    background: rgba(255, 85, 136, 0.09) !important;
    color: #ffd8e4 !important;
    border-radius: 10px !important;
}

#order-standard_cart .checkout-view .account-select-container,
#order-standard_cart .checkout-view .payment-methods,
#order-standard_cart .checkout-view .notes-container {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding: 14px 16px !important;
    margin-top: 10px !important;
}

#order-standard_cart .checkout-view textarea.form-control,
#order-standard_cart .checkout-view .form-control {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(10, 6, 30, 0.55) !important;
    color: #fff !important;
}

#order-standard_cart .checkout-view textarea.form-control {
    min-height: 94px;
    height: auto !important;
}

#order-standard_cart .checkout-view .btn.btn-success,
#order-standard_cart .checkout-view .btn-primary {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    padding: 12px 22px !important;
    box-shadow: 0 10px 26px rgba(56, 132, 255, 0.25);
}

#order-standard_cart .checkout-view .sub-heading {
    text-align: left !important;
    margin-top: 18px !important;
}

#order-standard_cart .checkout-view .sub-heading span::before,
#order-standard_cart .checkout-view .sub-heading span::after {
    display: none !important;
}

#order-standard_cart .breadcrumb > li > a { color: #c084fc !important; }
#order-standard_cart .breadcrumb > li.active { color: rgba(255,255,255,0.50) !important; }
#order-standard_cart .breadcrumb > li + li:before { color: rgba(255,255,255,0.25) !important; }

/* Store – Kategorie / Produktliste: Premium-Karten (Dark UI, Glow, klare Preis-Hierarchie) */
/*
 * WICHTIG: my_cart/css/style.css erzwingt noch Float-Layout (#order-standard_cart .products .product):
 *   .product-desc { float:left; width:60% } + footer { float:right; width:40% }
 * Das zerstört das CSS-Grid (wirkt wie 1 hohe Spalte + 2 rechts). Alles mit !important neutralisieren.
 */
#order-standard_cart.be-store-order .products .product.be-store-product-card {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

#order-standard_cart.be-store-order .products .product.be-store-product-card header,
#order-standard_cart.be-store-order .products .product.be-store-product-card .be-store-product-header {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

#order-standard_cart.be-store-order .products .product.be-store-product-card div.product-desc,
#order-standard_cart.be-store-order .products .product.be-store-product-card .product-desc {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-standard_cart.be-store-order .products .product.be-store-product-card footer,
#order-standard_cart.be-store-order .products .product.be-store-product-card .be-store-product-footer {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
}

#order-standard_cart.be-store-order .products .product.be-store-product-card div.product-pricing,
#order-standard_cart.be-store-order .products .product.be-store-product-card .product-pricing {
    float: none !important;
    width: 100% !important;
}

#order-standard_cart.be-store-order .be-home-pricing-card-inner {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#order-standard_cart.be-store-order .cart-body {
    padding-bottom: 32px;
    overflow-x: hidden;
    max-width: 100%;
}

/* Desktop: alle Karten exakt gleich hoch — Inhalt scrollt im mittleren Block */
@media (min-width: 992px) {
    #order-standard_cart.be-store-order .be-store-products-grid .be-store-product-card.be-home-pricing-card {
        height: 508px;
        min-height: 508px;
        max-height: 508px;
    }
}

#order-standard_cart.be-store-order .be-store-products {
    width: 100%;
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    box-sizing: border-box;
}

#order-standard_cart.be-store-order .be-store-product-card.be-home-pricing-card {
    background: linear-gradient(165deg, rgba(22, 12, 58, 0.85) 0%, rgba(12, 6, 38, 0.72) 100%) !important;
    background-color: rgba(15, 8, 46, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(139, 92, 246, 0.06) !important;
    box-sizing: border-box;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    /* Gleiche Außenmaße für alle Karten; Inhalt scrollt im mittleren Bereich */
    max-width: 100%;
    overflow: hidden !important;
}

#order-standard_cart.be-store-order .be-store-product-card.be-home-pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(167, 99, 255, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 28px 56px rgba(0, 0, 0, 0.4),
        0 0 48px rgba(139, 92, 246, 0.22) !important;
}

#order-standard_cart.be-store-order .be-store-product-card.be-home-pricing-card--popular {
    border-color: rgba(184, 118, 255, 0.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 56px rgba(0, 0, 0, 0.38),
        0 0 52px rgba(150, 87, 255, 0.28) !important;
    /* scale(1.03) aus .be-home-pricing-card--popular bricht Grid-Zellen */
    transform: none !important;
}

#order-standard_cart.be-store-order .be-store-product-card.be-home-pricing-card--popular:hover {
    transform: translateY(-4px) !important;
}

#order-standard_cart.be-store-order .be-store-product-card .be-home-pricing-badge {
    top: 16px;
    right: 16px;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Produktliste: CSS-Grid — drei gleich breite Spalten, eine Zeile */
#order-standard_cart.be-store-order .be-store-products-grid {
    display: grid;
    gap: 16px;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

#order-standard_cart.be-store-order .be-store-products-grid--1 {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
}

#order-standard_cart.be-store-order .be-store-products-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#order-standard_cart.be-store-order .be-store-products-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
}

#order-standard_cart.be-store-order .be-store-products-grid--3 > .be-store-product-col {
    grid-column: auto !important;
    grid-row: auto !important;
}

#order-standard_cart.be-store-order .be-store-products-grid--4,
#order-standard_cart.be-store-order .be-store-products-grid--5,
#order-standard_cart.be-store-order .be-store-products-grid--6 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#order-standard_cart.be-store-order .be-store-product-col {
    display: flex;
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
}

#order-standard_cart.be-store-order .be-store-product-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#order-standard_cart.be-store-order .be-store-product-card .be-home-pricing-card-inner {
    padding: 18px 16px 16px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
}

/* Mittelteil: Beschreibung + Features gemeinsam scrollen — gleiche Kartenhöhe, kein Footer-Overlap */
#order-standard_cart.be-store-order .be-store-product-desc {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    margin: 0 -2px 0 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 200, 0.5) rgba(255, 255, 255, 0.04);
    -webkit-overflow-scrolling: touch;
}

#order-standard_cart.be-store-order .be-store-product-desc::-webkit-scrollbar {
    width: 5px;
}

#order-standard_cart.be-store-order .be-store-product-desc::-webkit-scrollbar-thumb {
    background: rgba(140, 90, 220, 0.45);
    border-radius: 6px;
}

/* Fließtext: kompakt, lesbar — Scroll übernimmt .be-store-product-desc */
#order-standard_cart.be-store-order .be-store-desc-copy {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
    flex-shrink: 0;
}

#order-standard_cart.be-store-order .be-home-pricing-features--store {
    margin: 10px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#order-standard_cart.be-store-order .be-home-pricing-features--store li {
    align-items: flex-start;
    padding: 5px 0;
    font-size: 11.5px;
    line-height: 1.45;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#order-standard_cart.be-store-order .be-home-pricing-features--store li:last-child {
    border-bottom: none;
}

#order-standard_cart.be-store-order .be-store-product-desc .be-home-pricing-features {
    margin-bottom: 0;
}

#order-standard_cart.be-store-order .be-store-product-footer {
    margin-top: auto;
    padding-top: 12px;
    flex-shrink: 0;
    width: 100%;
    text-align: left;
    float: none !important;
    clear: both !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#order-standard_cart.be-store-order .be-store-product-pricing {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin: 0 0 10px !important;
}

#order-standard_cart.be-store-order .be-store-product-pricing .be-home-pricing-starting {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 8px;
}

#order-standard_cart.be-store-order .be-store-price-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#order-standard_cart.be-store-order .be-store-product-pricing .be-home-pricing-price {
    margin-bottom: 0;
    flex-wrap: wrap;
}

#order-standard_cart.be-store-order .be-store-product-pricing .be-home-pricing-price-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #ffffff !important;
}

#order-standard_cart.be-store-order .be-store-price-cycle--block {
    display: block !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

#order-standard_cart.be-store-order .be-store-product-pricing br {
    display: none;
}

#order-standard_cart.be-store-order .be-store-setup-fee {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
}

#order-standard_cart.be-store-order .be-store-price-cycle {
    white-space: normal;
}

#order-standard_cart.be-store-order .be-store-bundle-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65) !important;
    margin-bottom: 8px;
}

#order-standard_cart.be-store-order .be-home-pricing-btn.btn-order-now {
    display: inline-flex !important;
    width: 100%;
    min-height: 40px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, #b23cff 0%, #7b2fff 100%) !important;
    box-shadow:
        0 12px 32px rgba(130, 51, 255, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

#order-standard_cart.be-store-order .be-home-pricing-btn.btn-order-now:hover,
#order-standard_cart.be-store-order .be-home-pricing-btn.btn-order-now:focus {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
        0 16px 40px rgba(130, 51, 255, 0.5),
        0 0 48px rgba(167, 99, 255, 0.25) !important;
    color: #ffffff !important;
}

#order-standard_cart.be-store-order .be-store-product-header {
    position: relative;
    padding-right: 72px;
    flex-shrink: 0;
}

#order-standard_cart.be-store-order .be-store-product-header .be-home-pricing-plan-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

#order-standard_cart.be-store-order .be-store-stock-badge {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(178, 60, 255, 0.18);
    border: 1px solid rgba(178, 60, 255, 0.35);
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Kategorie-Header wie Referenz: Eyebrow, Titel, horizontale Linie */
#order-standard_cart.be-store-order .be-store-category-head--hero.be-home-pricing-head {
    text-align: center;
    margin-bottom: 48px;
    padding-bottom: 0;
    border-bottom: none !important;
    background: transparent !important;
}

#order-standard_cart.be-store-order .be-store-category-head .be-section-eyebrow {
    margin-bottom: 14px;
}

#order-standard_cart.be-store-order .be-store-category-title.be-home-pricing-title {
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 800;
}

#order-standard_cart.be-store-order .be-store-category-rule {
    height: 1px;
    max-width: min(100%, 720px);
    margin: 24px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22) 20%,
        rgba(255, 255, 255, 0.22) 80%,
        transparent
    );
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.15);
}

#order-standard_cart.be-store-order .be-store-category-tagline {
    color: rgba(255, 255, 255, 0.62) !important;
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

#order-standard_cart.be-store-order .be-store-category-title {
    color: #ffffff !important;
}

#order-standard_cart.be-store-order .product footer {
    float: none !important;
    width: 100% !important;
}

/* Tablet/Mobil: keine starre Höhe — begrenzte Kartenhöhe, kein Layout-Bruch */
@media (max-width: 991px) {
    #order-standard_cart.be-store-order .be-store-products-grid .be-store-product-card.be-home-pricing-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: min(82vh, 620px) !important;
    }

    #order-standard_cart.be-store-order .be-store-product-header {
        padding-right: 0;
    }
}

@media (max-width: 900px) {
    #order-standard_cart.be-store-order .be-store-products-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (max-width: 767px) {
    #order-standard_cart.be-store-order .be-store-products-grid--2,
    #order-standard_cart.be-store-order .be-store-products-grid--3,
    #order-standard_cart.be-store-order .be-store-products-grid--4,
    #order-standard_cart.be-store-order .be-store-products-grid--5,
    #order-standard_cart.be-store-order .be-store-products-grid--6 {
        grid-template-columns: minmax(0, 1fr);
    }

    #order-standard_cart.be-store-order .be-store-category-title.be-home-pricing-title {
        font-size: 28px;
    }

    #order-standard_cart.be-store-order .be-store-product-pricing .be-home-pricing-price-value {
        font-size: 24px;
    }
}

/* =========================================================
   Login (Rebuild – gleicher Container wie übriges Layout)
   ========================================================= */
section#main-body:has(.be-login-page) .main-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 48px;
}

.be-login-page {
    width: 100%;
    font-family: Rubik, "Open Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.be-login-page__center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: min(72vh, 720px);
    padding: 32px 0;
    box-sizing: border-box;
}

.be-login-page__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
}

.be-login-page__row--split {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    column-gap: 40px;
    row-gap: 32px;
    max-width: 980px;
}

.be-login-card {
    width: 100%;
    max-width: 520px;
    margin: 0;
    padding: 32px 32px 36px;
    box-sizing: border-box;
    background: rgba(15, 8, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.be-login-page .be-login-card .header-lined {
    background: transparent !important;
    border: none !important;
    padding: 0 0 8px !important;
    margin: 0 0 24px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.be-login-page .be-login-card .header-lined h1 {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
    line-height: 1.22;
}

.be-login-page .be-login-card .header-lined h1 small {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.be-login-form .form-group {
    margin-bottom: 20px;
}

.be-login-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55) !important;
}

.be-login-form .form-control {
    height: 48px;
    font-size: 15px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 10px;
    color: #fff !important;
    box-shadow: none;
}

.be-login-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.be-login-form .form-control:focus {
    border-color: rgba(192, 132, 252, 0.55) !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.2);
}

.be-login-form__remember {
    margin-top: 0;
    margin-bottom: 20px;
}

.be-login-form__remember label {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.78) !important;
}

.be-login-form__remember input[type="checkbox"] {
    margin-top: 2px;
}

.be-login-form__captcha {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.be-login-form__captcha .text-center {
    width: 100%;
}

.be-login-page .be-login-form__captcha .row {
    margin-left: 0;
    margin-right: 0;
}

.be-login-form__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
    margin-top: 8px;
}

.be-login-form__actions .btn {
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 0;
}

.be-login-page .be-login-form__actions .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(140, 69, 255, 0.28);
}

.be-login-page .be-login-form__actions .btn-primary:hover,
.be-login-page .be-login-form__actions .btn-primary:focus {
    filter: brightness(1.06);
    color: #fff !important;
}

.be-login-page .be-login-form__actions a.btn-default {
    text-decoration: none !important;
}

.be-login-page .be-login-form__actions .btn-default {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: none;
}

.be-login-page .be-login-form__actions .btn-default:hover,
.be-login-page .be-login-form__actions .btn-default:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
}

.be-login-aside {
    flex: 1 1 260px;
    max-width: 340px;
    min-width: 0;
    padding: 24px 0 0;
    box-sizing: border-box;
}

.be-login-page__row--split .be-login-aside {
    padding-top: 8px;
}

@media (min-width: 768px) {
    .be-login-page__row--split .be-login-aside {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 40px;
        margin-left: 0;
    }
}

.be-login-page .be-login-aside .sub-heading,
.be-login-page .be-login-aside .sub-heading-borderless {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
}

.be-login-page .be-login-aside .social-signin-btns .btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
}

.be-login-page .alert {
    border-radius: 10px;
    margin-bottom: 20px;
}

.be-login-page .alert-info {
    background: rgba(120, 50, 200, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.be-login-page .alert-success {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.be-login-page .alert-danger,
.be-login-page .alert-warning {
    background: rgba(220, 53, 69, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 767px) {
    .be-login-page__center {
        min-height: 0;
        padding: 24px 0 40px;
    }

    .be-login-page__row--split {
        max-width: 520px;
    }

    .be-login-aside {
        max-width: 520px;
        width: 100%;
        padding-left: 0 !important;
        border-left: none !important;
    }

    .be-login-form__actions {
        grid-template-columns: 1fr;
    }

    .be-login-form__actions .btn {
        width: 100%;
    }
}

/* =========================================================
   Register – zentrale Glass-Card, kein Sidebar, dunkler Hintergrund
   ========================================================= */
section#main-body:has(.register-wrapper) {
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
    background-color: #0f0c29 !important;
    min-height: 100vh;
    box-sizing: border-box;
}

section#main-body.xs-main-body:has(.register-wrapper) {
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.1), transparent 45%),
        linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
}

section#main-body:has(.register-wrapper) > .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}

section#main-body:has(.register-wrapper) > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

section#main-body:has(.register-wrapper) .main-content {
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

.register-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 20px;
}

.register-card {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 36px 40px 40px;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.login-switch {
    margin: 24px 0 0;
    padding: 0 4px 2px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.login-switch__link {
    color: #f046c8 !important;
    font-weight: 600;
    margin-left: 6px;
    text-decoration: none;
}

.login-switch__link:hover {
    color: #ff7adb !important;
    text-decoration: underline;
}

.register-card__header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

.register-card__title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff !important;
}

.register-card__lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

.register-card__alerts {
    margin-bottom: 20px;
}

.register-section {
    margin-bottom: 28px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.register-section:last-of-type,
.register-section--marketing {
    border-bottom: none;
}

.register-section__title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(236, 180, 255, 0.9);
}

.register-section__hint {
    display: block;
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.register-wrapper .register-section--oauth .sub-heading {
    margin: 0 0 12px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(236, 180, 255, 0.9);
    border: none;
    background: transparent !important;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-row--full {
    grid-template-columns: 1fr;
}

.form-row--thirds {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-row--tools {
    grid-template-columns: 1fr 1fr;
    align-items: end;
}

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

.register-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.register-stack .form-row {
    margin-bottom: 0;
}

.register-form .form-group {
    margin-bottom: 0;
}

.register-wrapper .register-form label:not(.field-icon) {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 6px;
}

.register-wrapper #registration .field,
.register-wrapper #registration .form-control,
.register-wrapper #containerNewUserSecurity .field,
.register-wrapper #containerNewUserSecurity .form-control,
.register-wrapper .register-form .field,
.register-wrapper .register-form .form-control,
.register-wrapper .register-form input[type="text"],
.register-wrapper .register-form input[type="email"],
.register-wrapper .register-form input[type="tel"],
.register-wrapper .register-form input[type="password"],
.register-wrapper .register-form select,
.register-wrapper .register-form textarea {
    height: 46px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

.register-wrapper .register-form textarea.field {
    height: auto !important;
    min-height: 100px;
    padding-top: 12px;
}

.register-wrapper .register-form .form-control::placeholder,
.register-wrapper .register-form input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.register-wrapper .register-form .form-control:focus,
.register-wrapper .register-form .field:focus {
    border-color: rgba(244, 114, 212, 0.65) !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(123, 47, 247, 0.25) !important;
}

.register-wrapper #registration .prepend-icon .field,
.register-wrapper #containerNewUserSecurity .prepend-icon .field,
.register-wrapper .register-form .prepend-icon .field {
    padding-left: 42px !important;
}

.register-wrapper #registration .prepend-icon .field-icon,
.register-wrapper #containerNewUserSecurity .prepend-icon .field-icon,
.register-wrapper .register-form .prepend-icon .field-icon {
    width: 42px !important;
    height: 46px !important;
    line-height: 46px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.register-wrapper #registration .prepend-icon .field-icon i,
.register-wrapper #containerNewUserSecurity .prepend-icon .field-icon i,
.register-wrapper .register-form .prepend-icon .field-icon i {
    color: rgba(255, 255, 255, 0.45) !important;
}

.register-wrapper .register-feedback {
    display: none;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(123, 47, 247, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.register-wrapper .password-strength-meter .progress {
    height: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.register-wrapper .register-meter-label {
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0;
}

.register-wrapper .register-form .btn-default,
.register-wrapper .register-form .generate-password {
    width: 100%;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 8px;
}

/* Custom dropdown (dark glass) — Registrierung, Tickets, Client-Account, Kontakte */
:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: visible;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select--open {
    z-index: 10060;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__native {
    position: fixed !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    max-height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    cursor: default !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 38px 0 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .prepend-icon .be-select__trigger {
    padding-left: 42px !important;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__trigger {
    position: relative;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__trigger::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select--open .be-select__trigger {
    border-color: rgba(244, 114, 212, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(123, 47, 247, 0.25) !important;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__trigger:focus {
    outline: 0;
    border-color: rgba(244, 114, 212, 0.65) !important;
    box-shadow: 0 0 0 2px rgba(123, 47, 247, 0.25) !important;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: min(280px, 50vh);
    padding: 6px;
    border-radius: 10px;
    background: rgba(22, 18, 45, 0.98) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    overflow: hidden;
    z-index: 10070;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__list {
    max-height: min(268px, calc(50vh - 12px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__list::-webkit-scrollbar {
    width: 8px;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    line-height: 1.35;
    transition: background 0.12s ease;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__option:hover,
:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__option:focus {
    background: rgba(123, 47, 247, 0.35);
    outline: 0;
    color: #fff;
}

:is(.register-wrapper, #main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"], #main-body.be-dashboard-page.be-client-account-page form.be-client-account-form, #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form, #main-body.be-dashboard-page.be-client-account-page .be-contacts-picker, body.be-page-contacts #main-body form.be-contacts-form, body.be-page-contacts #main-body .be-contacts-picker) .be-select__option.is-selected {
    background: rgba(244, 114, 212, 0.22);
    color: #fff;
}

/*
 * be-select: Das Listen-Panel wird in register-select.js an document.body gehängt (fixed position).
 * Die Regeln oben verlangen einen Vorfahren wie #main-body — ohne diese Zeilen bleibt die Liste weiß / ungestylt.
 */
body > .be-select__panel {
    box-sizing: border-box !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: rgba(22, 18, 45, 0.98) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
    overflow: hidden !important;
}

body > .be-select__panel .be-select__list {
    max-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
}

body > .be-select__panel .be-select__list::-webkit-scrollbar {
    width: 8px;
}

body > .be-select__panel .be-select__list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

body > .be-select__panel .be-select__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

body > .be-select__panel .be-select__option {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    line-height: 1.35 !important;
    transition: background 0.12s ease !important;
}

body > .be-select__panel .be-select__option:hover,
body > .be-select__panel .be-select__option:focus {
    background: rgba(123, 47, 247, 0.35) !important;
    outline: 0 !important;
    color: #fff !important;
}

body > .be-select__panel .be-select__option.is-selected {
    background: rgba(244, 114, 212, 0.22) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-submitticket-page form[role="form"] .be-select__trigger,
body.be-body-submitticket #main-body form[role="form"] .be-select__trigger {
    min-height: 42px !important;
    height: auto !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#main-body.be-dashboard-page.be-submitticket-page form[role="form"] .be-select--open .be-select__trigger,
body.be-body-submitticket #main-body form[role="form"] .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-submitticket-page form[role="form"] .be-select__trigger:focus,
body.be-body-submitticket #main-body form[role="form"] .be-select__trigger:focus,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__trigger:focus,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__trigger:focus,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__trigger:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__trigger {
    min-height: 42px !important;
    height: auto !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.register-wrapper .register-form__captcha {
    margin: 20px 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.register-wrapper .register-form__captcha .text-center {
    width: 100%;
}

.register-wrapper .register-form__captcha .row {
    margin-left: 0;
    margin-right: 0;
}

.register-marketing__title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92) !important;
}

.register-marketing__text {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.55;
}

.register-section--marketing {
    margin-top: 4px;
    margin-bottom: 20px;
}

.register-wrapper .register-tos.panel {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.register-wrapper .register-tos .panel-heading {
    background: rgba(123, 47, 247, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.register-wrapper .register-tos .panel-body {
    background: transparent !important;
    padding: 14px 16px !important;
}

.register-wrapper .register-tos__check {
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0;
}

.register-wrapper .register-tos__check a {
    color: #f472d6 !important;
}

.register-form__submit {
    margin-top: 20px;
    margin-bottom: 0;
}

.register-wrapper .register-submit {
    width: 100%;
    height: 45px;
    min-height: 45px;
    padding: 0 20px;
    border: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: #fff !important;
    background: linear-gradient(90deg, #7b2ff7, #f107a3) !important;
    box-shadow: 0 4px 20px rgba(123, 47, 247, 0.35);
}

.register-wrapper .register-submit:hover,
.register-wrapper .register-submit:focus {
    color: #fff !important;
    opacity: 0.95;
}

.register-wrapper .alert {
    border-radius: 8px;
    margin-bottom: 12px;
}

.register-wrapper .alert-info {
    background: rgba(123, 47, 247, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.register-wrapper .alert-danger {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.register-wrapper .field-help-text {
    color: rgba(255, 255, 255, 0.45) !important;
}

.register-wrapper .register-section--oauth .social-signin-btns .btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .register-wrapper {
        min-height: 0;
        padding: 24px 16px 40px;
        align-items: flex-start;
    }

    .register-card {
        padding: 22px 18px 28px;
    }

    .form-row,
    .form-row--thirds,
    .form-row--tools,
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Wartungsmodus (maintenance.tpl – wie Homepage / Register)
   ========================================================= */
.be-maintenance-body {
    margin: 0;
    min-height: 100vh;
    font-family: Rubik, "Open Sans", system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.1), transparent 45%),
        linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
    background-color: #0f0c29 !important;
    color: rgba(255, 255, 255, 0.9);
    -webkit-font-smoothing: antialiased;
}

.maintenance-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 20px;
}

.maintenance-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px 40px 44px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.maintenance-card__logo {
    margin: 0 auto 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 0;
}

.maintenance-card__logo-img {
    display: block;
    max-width: min(340px, 90vw);
    max-height: min(200px, 28vh);
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
}

.maintenance-card__brand {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.maintenance-card__title {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #fff !important;
}

.maintenance-countdown {
    margin: 0 auto 28px;
    max-width: 100%;
}

.maintenance-countdown__label {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.maintenance-countdown__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}

.maintenance-countdown__unit {
    min-width: 72px;
    padding: 12px 10px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

.maintenance-countdown__value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.maintenance-countdown__name {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.maintenance-countdown__done {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.maintenance-card__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.58);
    text-align: center;
}

.maintenance-card__text p {
    margin: 0 0 14px;
}

.maintenance-card__text p:last-child {
    margin-bottom: 0;
}

.maintenance-card__text--social {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
}

.maintenance-card__text strong {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 600;
}

@media (max-width: 480px) {
    .maintenance-page {
        padding: 24px 16px 32px;
    }

    .maintenance-card {
        padding: 28px 22px 32px;
    }

    .maintenance-card__title {
        font-size: 22px;
    }

    .maintenance-card__logo-img {
        max-height: min(160px, 26vh);
        max-width: min(280px, 88vw);
    }

    .maintenance-countdown__unit {
        min-width: 64px;
        padding: 10px 8px;
    }

    .maintenance-countdown__value {
        font-size: 22px;
    }
}

/* =========================================================
   Client Area Dashboard (clientareahome) – dunkles Glass-Layout
   wie Login / Register (einheitliche Violett–Magenta-Akzente)
   ========================================================= */
section#main-body.be-dashboard-page {
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.1), transparent 45%),
        linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
    background-color: #0f0c29 !important;
    padding-bottom: 48px !important;
    /* Gleiche Außenabstände links/rechts zum Viewport — Zentrierung wirkt optisch korrekt */
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-family: Rubik, "Open Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Block + volle Breite; Zentrierung des .container per margin:auto (stabiler als Flex) */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Client-Home: eine volle Spalte, kein Grid-Zweispalter (Sidebar ist im Markup ausgeschlossen) */
@media (min-width: 992px) {
    section#main-body.be-dashboard-page.be-client-home > .container > .row,
    #main-body.be-dashboard-page.be-client-home > .container > .row {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    section#main-body.be-dashboard-page.be-client-home > .container > .row > .main-content,
    #main-body.be-dashboard-page.be-client-home > .container > .row > .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.be-dashboard-page > .container {
    background: transparent !important;
    /* min(100%, 1680px) + margin-inline:auto = Block wirklich mittig im #main-body */
    width: min(100%, 1680px) !important;
    max-width: 1680px !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Dashboard: gleiche Breite/Zentrierung wie oben (xs-main-body + #main-body) */
section#main-body.be-dashboard-page.xs-main-body > .container,
#main-body.be-dashboard-page > .container {
    width: min(100%, 1680px) !important;
    max-width: 1680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    float: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Bootstrap pull-* entfernen: float:right auf .col-md-9 erzeugt sonst eine „Lücke links“ in der Zeile */
#main-body.be-dashboard-page .sidebar.col-md-3.pull-md-left,
#main-body.be-dashboard-page .main-content.col-md-9.pull-md-right,
section#main-body.be-dashboard-page .sidebar.col-md-3.pull-md-left,
section#main-body.be-dashboard-page .main-content.col-md-9.pull-md-right {
    float: none !important;
}

.be-dashboard-page > .container > .row {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#main-body.be-dashboard-page > .container > .row,
section#main-body.be-dashboard-page > .container > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ===== Two-column layout: Sidebar left | Content right (CSS Grid) ===== */
@media (min-width: 992px) {
    .be-dashboard-page > .container > .row {
        display: grid !important;
        /*
         * minmax(0, 250px): Spalte darf auf 0 schrumpfen (keine Geister-Lücke links), max. 250px mit Inhalt.
         */
        grid-template-columns: minmax(0, 250px) 1fr !important;
        /* Eine Zeile: Titel + Inhalt sitzen in .main-content (keine zweite Grid-Zeile mehr) */
        grid-template-rows: auto !important;
        gap: 0 20px !important;
        align-items: start !important;
        justify-content: stretch !important;
    }

    .be-dashboard-page > .container > .row > .col-md-3.sidebar {
        grid-column: 1 !important;
        /* Eine explizite Zeile (kein 1 / -1): vermeidet Edge-Cases mit impliziten Grid-Zeilen */
        grid-row: 1 !important;
        float: none !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-self: start !important;
        padding-top: 24px !important;
        padding-right: 16px !important;
        padding-left: 12px !important;
    }

    .be-dashboard-page > .container > .row > .col-md-9.pull-md-right:not(.main-content) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .be-dashboard-page > .container > .row > .col-md-9.main-content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        min-height: min-content !important;
        overflow: visible !important;
    }

    /*
     * Ursache „Inhalt rechts, riesige Lücke links“:
     * Bootstrap .col-md-9 = 75% Breite, .pull-md-right = float:right → in der Grid-Spalte bleibt links ~25 % leer.
     * Höhere Spezifität als all.min.css, damit die Hauptspalte wirklich volle Zellenbreite nutzt.
     */
    #main-body.be-dashboard-page > .container > .row > .main-content.col-md-9.pull-md-right,
    #main-body.be-dashboard-page > .container > .row > .col-md-9.main-content.pull-md-right,
    section#main-body.be-dashboard-page > .container > .row > .main-content.col-md-9.pull-md-right,
    section#main-body.be-dashboard-page > .container > .row > .col-md-9.main-content.pull-md-right,
    section#main-body.be-dashboard-page.xs-main-body > .container > .row > .main-content.col-md-9.pull-md-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-self: stretch !important;
    }

    /* Ohne Sidebar-Zeile: einspaltiges Grid, Inhalt über volle Breite (mittig im Container) */
    #main-body.be-dashboard-page > .container > .row:not(:has(> .sidebar)) {
        grid-template-columns: 1fr !important;
    }

    #main-body.be-dashboard-page > .container > .row:not(:has(> .sidebar)) > .main-content {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*
     * „Geister-Sidebar“ (nur ausgeblendete Info-Karten, DOM leer sichtbar): ohne :has()-Selektoren
     * (Parser/Linter-Probleme). Leere .sidebar ohne .panel-sidebar kollabieren.
     */
    #main-body.be-dashboard-page > .container > .row > .sidebar:not(:has(.panel-sidebar)),
    section#main-body.be-dashboard-page > .container > .row > .sidebar:not(:has(.panel-sidebar)),
    .be-dashboard-page > .container > .row > .sidebar:not(:has(.panel-sidebar)) {
        display: none !important;
    }

    #main-body.be-dashboard-page > .container > .row:has(> .sidebar:not(:has(.panel-sidebar))) {
        grid-template-columns: 1fr !important;
    }

    #main-body.be-dashboard-page > .container > .row:has(> .sidebar:not(:has(.panel-sidebar))) > .main-content,
    section#main-body.be-dashboard-page > .container > .row:has(> .sidebar:not(:has(.panel-sidebar))) > .main-content,
    .be-dashboard-page > .container > .row:has(> .sidebar:not(:has(.panel-sidebar))) > .main-content {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .be-dashboard-page > .container > .row > .col-md-3.sidebar-secondary {
        display: none !important;
    }

    .be-dashboard-page > .container > .row > .clearfix {
        display: none !important;
    }

    /* Account-Bereich: „Account“-Kasten etwas nach unten (unterhalb des oberen Kanten) */
    #main-body.be-dashboard-page.be-client-account-page > .container > .row > .col-md-3.sidebar,
    body.be-page-contacts #main-body.be-dashboard-page > .container > .row > .col-md-3.sidebar,
    section#main-body.be-dashboard-page:has(#inputContactId) > .container > .row > .col-md-3.sidebar,
    section#main-body:has(#inputContactId) > .container > .row > .col-md-3.sidebar {
        margin-top: 58px !important;
    }
}

@media (max-width: 991px) {
    .be-dashboard-page > .container > .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .be-dashboard-page > .container > .row > .col-md-3.sidebar {
        order: 1 !important;
        float: none !important;
        width: 100% !important;
    }

    .be-dashboard-page > .container > .row > .col-md-9.pull-md-right:not(.main-content) {
        order: 2 !important;
        float: none !important;
        width: 100% !important;
    }

    .be-dashboard-page > .container > .row > .col-md-9.main-content {
        order: 2 !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #main-body.be-dashboard-page > .container > .row > .main-content.col-md-9.pull-md-right,
    section#main-body.be-dashboard-page > .container > .row > .main-content.col-md-9.pull-md-right {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .be-dashboard-page > .container > .row > .clearfix {
        display: none !important;
    }
}

.be-dashboard-page .main-content {
    display: block !important;
    padding: 6px 12px 28px 12px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    box-sizing: border-box !important;
}

.be-dashboard-page .main-content > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.be-dashboard-page .main-content a:not(.btn) {
    color: rgba(244, 114, 212, 0.95) !important;
}

.be-dashboard-page .main-content a:not(.btn):hover {
    color: #fff !important;
}

.be-dashboard-page .header-lined {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 0 6px !important;
    /* Oben Luft zur Navbar; unten minimal bis zu den Kacheln (Hauptspalte) */
    margin: 22px 0 4px !important;
    text-align: center !important;
}

.be-dashboard-page .header-lined h1 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.be-dashboard-page .header-lined h1 small {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.5) !important;
    font-weight: 500;
    font-size: 14px !important;
    letter-spacing: 0.01em;
}

.be-dashboard-page .breadcrumb {
    background: transparent !important;
    padding: 8px 0 0 !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.02em !important;
}

.be-dashboard-page .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

.be-dashboard-page .breadcrumb > li > a {
    color: rgba(244, 114, 212, 0.95) !important;
}

.be-dashboard-page .breadcrumb > .active {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Stat-Kacheln – gleiche Höhe & Raster */
.be-dashboard-page .tiles {
    margin: 0 0 6px !important;
}

.be-dashboard-page .tiles .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.be-dashboard-page .tiles .tile {
    padding: 8px !important;
    background: transparent !important;
    border: 0 !important;
    display: flex !important;
}

.be-dashboard-page .tiles .tile > a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    position: relative !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px 14px 18px !important;
    min-height: 136px !important;
    box-sizing: border-box;
    text-decoration: none !important;
    color: #fff !important;
    overflow: hidden;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.be-dashboard-page .tiles .tile > a:hover {
    transform: translateY(-2px);
    border-color: rgba(244, 114, 212, 0.35) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.be-dashboard-page .tiles .tile .icon {
    position: static !important;
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 0 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.be-dashboard-page .tiles .tile .stat {
    margin-top: 0 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    line-height: 1.15 !important;
    color: #fff !important;
    flex: 1 1 auto !important;
}

.be-dashboard-page .tiles .tile .title {
    margin-top: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Einheitliche Akzentlinie (kein bunter Mix) */
.be-dashboard-page .tiles .tile .highlight {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    margin-top: 0 !important;
    height: 3px !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #8c45ff, #e879f9) !important;
}

.be-dashboard-page .tiles .tile .highlight.bg-color-blue,
.be-dashboard-page .tiles .tile .highlight.bg-color-green,
.be-dashboard-page .tiles .tile .highlight.bg-color-red,
.be-dashboard-page .tiles .tile .highlight.bg-color-gold,
.be-dashboard-page .tiles .tile .highlight.bg-color-orange {
    background: linear-gradient(90deg, #8c45ff, #e879f9) !important;
}

@media (max-width: 767px) {
    .be-dashboard-page .tiles .tile {
        border-bottom: 0 !important;
    }
}

/* Panel-Block direkt unter den Kacheln */
.be-dashboard-page .client-home-panels {
    margin-top: 0 !important;
}

/* Zwei-Spalten-Panel-Grid: gleiche Höhe & saubere Kanten */
.be-dashboard-page .client-home-panels > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    margin-bottom: 0 !important;
}

.be-dashboard-page .client-home-panels > .row > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
    display: flex !important;
    flex-direction: column !important;
}

.be-dashboard-page .client-home-panels > .row > [class*="col-"] > .panel {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 10px !important;
}

/* Client Home: alle Infokarten in einem Raster (ersetzt odd/even-Zweispalten-foreach) */
.be-dashboard-page .client-home-panels > .row > .be-client-home-panels-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    flex-direction: unset !important;
    align-items: stretch !important;
}

.be-dashboard-page .client-home-panels > .row > .be-client-home-panels-columns > .panel {
    min-width: 0 !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}

@media (max-width: 767px) {
    .be-dashboard-page .client-home-panels > .row > .be-client-home-panels-columns {
        grid-template-columns: 1fr !important;
    }
}

.be-dashboard-page .client-home-panels > .row > [class*="col-"] > .panel .panel-body {
    flex: 1 1 auto !important;
}

/* Haupt-Panels (Active Products, Tickets, …) */
.be-dashboard-page .client-home-panels .panel,
.be-dashboard-page .client-home-panels .panel.panel-default {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
}

.be-dashboard-page .client-home-panels .panel.panel-accent-blue,
.be-dashboard-page .client-home-panels .panel.panel-accent-green,
.be-dashboard-page .client-home-panels .panel.panel-accent-orange,
.be-dashboard-page .client-home-panels .panel.panel-accent-red,
.be-dashboard-page .client-home-panels .panel.panel-accent-gold,
.be-dashboard-page .client-home-panels .panel[class*="panel-accent"] {
    border-top: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.be-dashboard-page .client-home-panels .panel-default > .panel-heading,
.be-dashboard-page .client-home-panels .panel > .panel-heading {
    background: rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
}

.be-dashboard-page .client-home-panels .panel-heading .panel-title {
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

.be-dashboard-page .client-home-panels .panel-title {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
}

.be-dashboard-page .client-home-panels .panel-title .badge {
    background: rgba(140, 69, 255, 0.45) !important;
    color: #fff !important;
    font-weight: 600;
}

.be-dashboard-page .client-home-panels .panel-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.78) !important;
    padding: 16px 16px 18px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.be-dashboard-page .client-home-panels .panel-body .text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
}

.be-dashboard-page .client-home-panels .list-group {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.be-dashboard-page .client-home-panels .list-group-item {
    background: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.be-dashboard-page .client-home-panels .list-group-item:hover {
    background: rgba(123, 47, 247, 0.22) !important;
}

.be-dashboard-page .client-home-panels .list-group-item.active {
    background: rgba(140, 69, 255, 0.28) !important;
    border-color: rgba(244, 114, 212, 0.25) !important;
}

.be-dashboard-page .client-home-panels .panel-footer {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border-radius: 0 0 12px 12px !important;
}

.be-dashboard-page .client-home-panels .btn-default,
.be-dashboard-page .client-home-panels .btn.btn-default {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600;
}

.be-dashboard-page .client-home-panels .btn-default:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
}

.be-dashboard-page .client-home-panels .panel-heading .pull-right {
    margin-top: 0 !important;
}

.be-dashboard-page .client-home-panels .panel-heading .btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    line-height: 1.3 !important;
}

.be-dashboard-page .client-home-panels .btn-xs.bg-color-blue,
.be-dashboard-page .client-home-panels .btn-xs[class*="bg-color"] {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
}

.be-dashboard-page .client-home-panels .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.be-dashboard-page .client-home-panels .btn-success:hover {
    filter: brightness(1.06);
    color: #fff !important;
}

.be-dashboard-page .client-home-panels input.form-control,
.be-dashboard-page .client-home-panels select.form-control {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/*
 * Client-Area: alle Informations-Karten in der linken Spalte sichtbar halten
 * (kein Abschneiden durch Grid/Overflow; volle Panel-Elemente nicht ausblenden).
 */
#main-body.be-dashboard-page .sidebar {
    overflow: visible !important;
}

#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar,
#main-body.be-dashboard-page .sidebar > .panel.panel-default.panel-sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
}

/* Plan B: Adress-/„Your Info“-Sidebar-Karte (sidebar.tpl filtert per Name; Fallback per Attribut) */
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuItemName="Client Details"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuitemname="Client Details"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuItemName="Account Information"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuitemname="Account Information"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuItemName="Account Details"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuitemname="Account Details"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuItemName="Client Information"],
#main-body.be-dashboard-page .sidebar > .panel.panel-sidebar[menuitemname="Client Information"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Linke Sidebar – dunkles Glass; gleichmäßiger Abstand zwischen den Karten (Margin, kein Flex-Gap) */
.be-dashboard-page .sidebar .panel.panel-sidebar {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

.be-dashboard-page .sidebar > .panel.panel-sidebar:last-child {
    margin-bottom: 0 !important;
}

/*
 * Dashboard: Inhalt der Sidebar-Panels immer anzeigen (kein slideUp/Einklappen durch WHMCS-JS).
 * Inline display:none vom Skript wird durch !important überschrieben.
 */
#main-body.be-dashboard-page .sidebar .panel-sidebar .panel-body,
#main-body.be-dashboard-page .sidebar .panel-sidebar .list-group {
    display: block !important;
}

#main-body.be-dashboard-page .sidebar .panel-sidebar .panel-footer {
    display: block !important;
}

#main-body.be-dashboard-page .sidebar .panel-sidebar .panel-minimise {
    pointer-events: none !important;
    opacity: 0.35 !important;
}

.be-dashboard-page .sidebar .panel-sidebar > .panel-heading {
    background: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-title {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 12px 14px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.be-dashboard-page .sidebar .panel-sidebar > .panel-footer,
.be-dashboard-page .sidebar .panel-sidebar .panel-footer {
    background: rgba(0, 0, 0, 0.28) !important;
    background-color: rgba(12, 10, 32, 0.92) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 10px 12px !important;
    border-radius: 0 0 12px 12px !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer a:not(.btn) {
    color: rgba(244, 114, 212, 0.98) !important;
    font-weight: 600 !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer a:not(.btn):hover {
    color: #fff !important;
    text-decoration: none !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer .btn-success {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer .btn-success:hover {
    filter: brightness(1.08);
    color: #fff !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer .btn-default,
.be-dashboard-page .sidebar .panel-sidebar .panel-footer .btn.btn-default {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer .btn-link {
    color: rgba(244, 114, 212, 0.98) !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-footer .text-muted {
    color: rgba(255, 255, 255, 0.55) !important;
}

.be-dashboard-page .sidebar .panel-sidebar .panel-heading .panel-minimise {
    color: rgba(255, 255, 255, 0.45) !important;
}

.be-dashboard-page .sidebar .panel-sidebar .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.be-dashboard-page .sidebar .panel-sidebar a.list-group-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 10px !important;
}

.be-dashboard-page .sidebar .panel-sidebar a.list-group-item .sidebar-menu-item-icon {
    float: none !important;
    order: -1 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: 15px !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

.be-dashboard-page .sidebar .panel-sidebar a.list-group-item .badge {
    order: 2 !important;
    margin-left: auto !important;
}

.be-dashboard-page .sidebar .panel-sidebar .list-group-item:hover {
    background: rgba(123, 47, 247, 0.2) !important;
}

.be-dashboard-page .sidebar .panel-sidebar .list-group-item.active {
    background: rgba(140, 69, 255, 0.25) !important;
}

.be-dashboard-page .sidebar .panel-sidebar a.list-group-item:hover .sidebar-menu-item-icon,
.be-dashboard-page .sidebar .panel-sidebar a.list-group-item.active .sidebar-menu-item-icon {
    color: rgba(255, 255, 255, 0.85) !important;
}

.be-dashboard-page .sidebar .btn,
.be-dashboard-page .sidebar .btn-default {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

.be-dashboard-page .sidebar .btn-primary,
.be-dashboard-page .sidebar a.btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(140, 69, 255, 0.25);
}

.be-dashboard-page .sidebar .btn-primary:hover {
    filter: brightness(1.06);
    color: #fff !important;
}

.be-dashboard-page .sidebar .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.be-dashboard-page .sidebar .btn-default:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Alerts & leere Zustände */
.be-dashboard-page .alert {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-bottom: 8px !important;
}

.be-dashboard-page .alert-info {
    background: rgba(120, 50, 200, 0.22) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* =========================================================
   My Products & Services (clientareaproducts) – gleicher Shell
   wie Dashboard, volle Breite, dunkles Glas für DataTable
   ========================================================= */
#main-body.be-dashboard-page.be-products-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

#main-body.be-dashboard-page.be-products-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-products-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-products-page .table-container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0 !important;
    overflow: hidden;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Toolbar: Info links, Suche rechts, Tabelle darunter (styles.css #4f5360 / #f6f6f6 überschreiben) */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .listtable {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    padding: 14px 18px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .listtable .dataTables_info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .listtable .dataTables_filter {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .listtable table.dataTable,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .listtable table.table-list {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_filter {
    float: none !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_filter label {
    padding: 0 !important;
}

/* Kein search.png (oft mit weißem Kasten); SVG-Lupe auf dunklem Glas */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    padding: 9px 12px 9px 42px !important;
    border-radius: 8px !important;
    width: min(100%, 260px) !important;
    height: auto !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_info {
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-products-page div.dataTables_wrapper div.dataTables_info {
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_length {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: rgba(8, 6, 28, 0.35) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_length label {
    padding: 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_length label .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    height: 32px !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 16px !important;
    background: rgba(8, 6, 28, 0.35) !important;
    border-top: none !important;
    float: none !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_length,
    #main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_paginate {
        flex: 1 1 100% !important;
    }

    #main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        justify-content: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    }
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_paginate .pagination > li > a,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    background: rgba(123, 47, 247, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-products-page .pagination > .active > a,
#main-body.be-dashboard-page.be-products-page .pagination > .active > a:focus,
#main-body.be-dashboard-page.be-products-page .pagination > .active > a:hover,
#main-body.be-dashboard-page.be-products-page .pagination > .active > span {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Einheitlicher Header (kein Wechsel lila/dunkel durch Sortier-Klassen) */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th.sorting,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th.sorting_desc,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: rgba(255, 255, 255, 0.07) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th:nth-child(even) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Aktive Sortierung: nur Unterstrich-Akzent, gleicher Grundton */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th.sorting_desc {
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(232, 121, 249, 0.95) !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead tr:first-child th:first-child {
    border-top-left-radius: 10px !important;
}

/* Rechte obere Ecke: Status-Spalte (6. TH oft per responsive ausgeblendet) */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead tr:first-child th:nth-child(5) {
    border-top-right-radius: 10px !important;
}

/* Gleiche Sortier-Icons (DataTables/Glyphicons-Mix ersetzen) */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting:after,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_asc:after,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_desc:after,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    font-family: system-ui, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    opacity: 0.55 !important;
    bottom: auto !important;
    top: 50% !important;
    right: 10px !important;
    margin-top: -6px !important;
    transform: none !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting:after {
    content: "⇅" !important;
    opacity: 0.45 !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_asc:after {
    content: "↑" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_desc:after {
    content: "↓" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    content: "⇅" !important;
    opacity: 0.25 !important;
}

/* SSL-Spalte schmal; Produkt/Service links */
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th:first-child {
    width: 44px !important;
    max-width: 52px !important;
    padding: 12px 4px !important;
    text-align: center !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th:nth-child(2) {
    text-align: left !important;
    padding-left: 16px !important;
    padding-right: 38px !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th:nth-child(3),
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th:nth-child(4),
#main-body.be-dashboard-page.be-products-page .dataTables_wrapper table.table-list thead th:nth-child(5) {
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 36px !important;
}

#main-body.be-dashboard-page.be-products-page table.table-list tbody td:first-child {
    width: 44px !important;
    max-width: 52px !important;
}

#main-body.be-dashboard-page.be-products-page table.table-list tbody td:nth-child(2) {
    text-align: left !important;
}

#main-body.be-dashboard-page.be-products-page table.table-list tbody td {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-products-page .table-list > tbody > tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-products-page .table-list > tbody > tr:hover > td {
    background: rgba(123, 47, 247, 0.18) !important;
}

#main-body.be-dashboard-page.be-products-page .dataTables_empty {
    padding: 40px 24px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
}

#main-body.be-dashboard-page.be-products-page #tableLoading {
    padding: 36px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

#main-body.be-dashboard-page.be-products-page .table-container .label.status {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-products-page .table-container .btn-info {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
}

@media (max-width: 600px) {
    #main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    #main-body.be-dashboard-page.be-products-page .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100% !important;
    }
}

/* =========================================================
   Product Management (clientareaproductdetails)
   Modern Dark-Glass Design im Dashboard-Stil
   ========================================================= */
section#main-body.be-dashboard-page:has(.product-details) .main-content,
#main-body.be-dashboard-page:has(.product-details) .main-content {
    padding-top: 16px !important;
    padding-bottom: 42px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .tab-content.margin-bottom,
#main-body.be-dashboard-page:has(.product-details) .tab-content.margin-bottom {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-details,
#main-body.be-dashboard-page:has(.product-details) .product-details {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px 18px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-status,
#main-body.be-dashboard-page:has(.product-details) .product-status {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 18px 16px !important;
}

/* Modul-Overview (Hetzner u. a.): kein verschachtelter Innenkasten — nur äußere .product-details-Glas-Karte */
section#main-body.be-dashboard-page:has(.product-details) .module-client-area .product-details .product-status,
#main-body.be-dashboard-page:has(.product-details) .module-client-area .product-details .product-status,
section#main-body.be-dashboard-page.be-product-details-page .module-client-area .product-details .product-status,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .product-details .product-status {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

section#main-body.be-dashboard-page:has(.product-details) .module-client-area .product-details .product-status .product-icon.footer-bg-sm,
#main-body.be-dashboard-page:has(.product-details) .module-client-area .product-details .product-status .product-icon.footer-bg-sm,
section#main-body.be-dashboard-page.be-product-details-page .module-client-area .product-details .product-status .product-icon.footer-bg-sm,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .product-details .product-status .product-icon.footer-bg-sm {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 8px 2px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .module-client-area .product-details .product-status .product-icon svg,
#main-body.be-dashboard-page:has(.product-details) .module-client-area .product-details .product-status .product-icon svg,
section#main-body.be-dashboard-page.be-product-details-page .module-client-area .product-details .product-status .product-icon svg,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .product-details .product-status .product-icon svg {
    display: block !important;
    margin: 0 auto 6px !important;
}

/* Hetzner Overview: linke Spalte (glas-Karte inkl. Inhalt + Aktionsbuttons) etwas nach unten — optisch zur rechten Karte */
section#main-body.be-dashboard-page:has(.product-details) .module-client-area.be-product-overview-module .row:has(> .col-md-6 #resourceusage) > .col-md-6:first-child,
#main-body.be-dashboard-page:has(.product-details) .module-client-area.be-product-overview-module .row:has(> .col-md-6 #resourceusage) > .col-md-6:first-child,
section#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .row:has(> .col-md-6 #resourceusage) > .col-md-6:first-child,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .row:has(> .col-md-6 #resourceusage) > .col-md-6:first-child,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .row:has(> .col-md-6 #resourceusage) > .col-md-6:first-child {
    margin-top: 20px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-status .product-icon h3,
#main-body.be-dashboard-page:has(.product-details) .product-status .product-icon h3 {
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-status .product-icon h4,
#main-body.be-dashboard-page:has(.product-details) .product-status .product-icon h4 {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-status-text,
#main-body.be-dashboard-page:has(.product-details) .product-status-text {
    border-radius: 999px !important;
    padding: 8px 14px !important;
    margin-top: 14px !important;
    display: inline-block !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    background: rgba(140, 69, 255, 0.2) !important;
    border: 1px solid rgba(194, 126, 255, 0.4) !important;
    color: #f1dcff !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn,
#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 10px 12px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn-success,
#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn-success {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn-primary,
#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn-primary {
    background: linear-gradient(135deg, #2b7cff, #42a5f5) !important;
    border: none !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn-danger,
#main-body.be-dashboard-page:has(.product-details) .product-actions-wrapper .btn-danger {
    background: linear-gradient(135deg, #ff4b8b, #ff6a88) !important;
    border: none !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-details .col-md-6.text-center > h4,
#main-body.be-dashboard-page:has(.product-details) .product-details .col-md-6.text-center > h4 {
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-details .col-md-6.text-center,
#main-body.be-dashboard-page:has(.product-details) .product-details .col-md-6.text-center {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

section#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow,
#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin-top: 18px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li > a,
#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li > a {
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

section#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li.active > a,
section#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li.active > a:focus,
section#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li.active > a:hover,
#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li.active > a,
#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li.active > a:focus,
#main-body.be-dashboard-page:has(.product-details) .nav-tabs-overflow > li.active > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 -2px 0 #d26dff !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container,
#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
    padding: 16px 14px !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container .tab-pane .row,
#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container .tab-pane .row {
    padding: 10px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

section#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container .tab-pane .row:last-child,
#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container .tab-pane .row:last-child {
    border-bottom: 0 !important;
}

section#main-body.be-dashboard-page:has(.product-details) .module-client-area,
#main-body.be-dashboard-page:has(.product-details) .module-client-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: auto;
}

section#main-body.be-dashboard-page:has(.product-details) .module-client-area table,
section#main-body.be-dashboard-page:has(.product-details) .module-client-area .table,
#main-body.be-dashboard-page:has(.product-details) .module-client-area table,
#main-body.be-dashboard-page:has(.product-details) .module-client-area .table {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

@media (max-width: 767px) {
    section#main-body.be-dashboard-page:has(.product-details) .product-details,
    #main-body.be-dashboard-page:has(.product-details) .product-details {
        padding: 14px 10px !important;
    }

    section#main-body.be-dashboard-page:has(.product-details) .product-details-tab-container,
    #main-body.be-dashboard-page:has(.product-details) .product-details-tab-container {
        padding: 12px 8px !important;
    }
}

/* =========================================================
   My Domains (clientareadomains) – gleiches dunkles Glas wie
   Products; 8 Spalten inkl. Checkbox + Aktionen
   ========================================================= */
#main-body.be-dashboard-page.be-domains-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

#main-body.be-dashboard-page.be-domains-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-domains-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-domains-page .tab-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-domains-page .tab-pane {
    background: transparent !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0 !important;
    overflow: hidden;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .listtable {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    padding: 14px 18px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .listtable .dataTables_info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .listtable .dataTables_filter {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .listtable table.dataTable,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .listtable table.table-list {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_filter {
    float: none !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_filter label {
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    padding: 9px 12px 9px 42px !important;
    border-radius: 8px !important;
    width: min(100%, 260px) !important;
    height: auto !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#main-body.be-dashboard-page.be-domains-page div.dataTables_wrapper div.dataTables_info {
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_length {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: rgba(8, 6, 28, 0.35) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_length label {
    padding: 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_length label .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    height: 32px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 16px !important;
    background: rgba(8, 6, 28, 0.35) !important;
    border-top: none !important;
    float: none !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_length,
    #main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_paginate {
        flex: 1 1 100% !important;
    }

    #main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        justify-content: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    }
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_paginate .pagination > li > a,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    background: rgba(123, 47, 247, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-domains-page .pagination > .active > a,
#main-body.be-dashboard-page.be-domains-page .pagination > .active > a:focus,
#main-body.be-dashboard-page.be-domains-page .pagination > .active > a:hover,
#main-body.be-dashboard-page.be-domains-page .pagination > .active > span {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th.sorting,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th.sorting_desc,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th.sorting_desc {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(232, 121, 249, 0.95) !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead tr:first-child th:first-child {
    border-top-left-radius: 10px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead tr:first-child th:last-child {
    border-top-right-radius: 10px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting:after,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting_asc:after,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting_desc:after,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    font-family: system-ui, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    bottom: auto !important;
    top: 50% !important;
    right: 8px !important;
    margin-top: -6px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting:after {
    content: "⇅" !important;
    opacity: 0.45 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting_asc:after {
    content: "↑" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.dataTable thead .sorting_desc:after {
    content: "↓" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(1) {
    width: 38px !important;
    padding: 10px 8px !important;
    text-align: center !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(2) {
    width: 44px !important;
    padding: 10px 4px !important;
    text-align: center !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(3) {
    text-align: left !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(4),
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(5),
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(6),
#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(7) {
    text-align: center !important;
    padding-left: 10px !important;
    padding-right: 30px !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_wrapper table.table-list thead th:nth-child(8) {
    width: 72px !important;
    text-align: center !important;
    padding: 10px 6px !important;
}

#main-body.be-dashboard-page.be-domains-page table.table-list tbody td {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-domains-page .table-list > tbody > tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-domains-page .table-list > tbody > tr:hover > td {
    background: rgba(123, 47, 247, 0.18) !important;
}

#main-body.be-dashboard-page.be-domains-page table.table-list tbody td:nth-child(3) {
    text-align: left !important;
}

#main-body.be-dashboard-page.be-domains-page table.table-list tbody td:nth-child(3) a {
    color: rgba(244, 114, 212, 0.98) !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-domains-page table.table-list tbody td:nth-child(3) a:hover {
    color: #fff !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .text-success {
    color: #4ade80 !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .text-danger {
    color: #fb7185 !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container input[type="checkbox"] {
    accent-color: #a855f7;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .btn-group .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 6px !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .btn-group .btn-default:hover {
    background: rgba(123, 47, 247, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .dropdown-menu {
    background: rgba(22, 18, 45, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .dropdown-menu > li > a:hover {
    background: rgba(140, 69, 255, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-domains-page .table-container .label.status {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-domains-page .dataTables_empty {
    padding: 40px 24px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
}

#main-body.be-dashboard-page.be-domains-page #tableLoading {
    padding: 36px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Massenaktionen unter der Tabelle – Flex, gleichmäßige Abstände */
#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom {
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    display: inline-flex !important;
    align-items: stretch !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom > .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    padding: 10px 20px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom > .btn:hover {
    background: rgba(140, 69, 255, 0.22) !important;
    border-color: rgba(244, 114, 212, 0.35) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom > .btn .glyphicon {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    opacity: 0.95 !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom > .btn .caret {
    margin: 0 0 0 2px !important;
    vertical-align: middle !important;
    border-top-color: rgba(255, 255, 255, 0.92) !important;
    flex-shrink: 0 !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom .dropdown-menu {
    background: rgba(22, 18, 45, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    margin-top: 6px !important;
    padding: 6px 0 !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom .dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 9px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#main-body.be-dashboard-page.be-domains-page .btn-group.margin-bottom .dropdown-menu > li > a:hover {
    background: rgba(140, 69, 255, 0.28) !important;
    color: #fff !important;
}

@media (max-width: 600px) {
    #main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
    }

    #main-body.be-dashboard-page.be-domains-page .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100% !important;
    }
}

/* =========================================================
   My Invoices (clientareainvoices) – dunkles Glas wie Products
   ========================================================= */
#main-body.be-dashboard-page.be-invoices-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

#main-body.be-dashboard-page.be-invoices-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-invoices-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-invoices-page .table-container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0 !important;
    overflow: hidden;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .listtable {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    padding: 14px 18px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .listtable .dataTables_info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .listtable .dataTables_filter {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .listtable table.dataTable,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .listtable table.table-list {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_filter {
    float: none !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_filter label {
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    padding: 9px 12px 9px 42px !important;
    border-radius: 8px !important;
    width: min(100%, 260px) !important;
    height: auto !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#main-body.be-dashboard-page.be-invoices-page div.dataTables_wrapper div.dataTables_info {
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_length {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: rgba(8, 6, 28, 0.35) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_length label {
    padding: 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_length label .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    height: 32px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 16px !important;
    background: rgba(8, 6, 28, 0.35) !important;
    border-top: none !important;
    float: none !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_length,
    #main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_paginate {
        flex: 1 1 100% !important;
    }

    #main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        justify-content: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    }
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_paginate .pagination > li > a,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    background: rgba(123, 47, 247, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-invoices-page .pagination > .active > a,
#main-body.be-dashboard-page.be-invoices-page .pagination > .active > a:focus,
#main-body.be-dashboard-page.be-invoices-page .pagination > .active > a:hover,
#main-body.be-dashboard-page.be-invoices-page .pagination > .active > span {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th.sorting,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th.sorting_desc,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th.sorting_desc {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(232, 121, 249, 0.95) !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead tr:first-child th:first-child {
    border-top-left-radius: 10px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead tr:first-child th:nth-child(5) {
    border-top-right-radius: 10px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting:after,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting_asc:after,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting_desc:after,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    font-family: system-ui, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    bottom: auto !important;
    top: 50% !important;
    right: 10px !important;
    margin-top: -6px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting:after {
    content: "⇅" !important;
    opacity: 0.45 !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting_asc:after {
    content: "↑" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.dataTable thead .sorting_desc:after {
    content: "↓" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th:first-child {
    text-align: left !important;
    padding-left: 16px !important;
    padding-right: 36px !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th:nth-child(2),
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th:nth-child(3),
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th:nth-child(4),
#main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper table.table-list thead th:nth-child(5) {
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 34px !important;
}

#main-body.be-dashboard-page.be-invoices-page table.table-list tbody td:first-child {
    text-align: left !important;
}

#main-body.be-dashboard-page.be-invoices-page table.table-list tbody td:nth-child(2),
#main-body.be-dashboard-page.be-invoices-page table.table-list tbody td:nth-child(3),
#main-body.be-dashboard-page.be-invoices-page table.table-list tbody td:nth-child(4) {
    text-align: center !important;
}

#main-body.be-dashboard-page.be-invoices-page table.table-list tbody td:nth-child(5) {
    text-align: center !important;
}

#main-body.be-dashboard-page.be-invoices-page table.table-list tbody td {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-invoices-page .table-list > tbody > tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-invoices-page .table-list > tbody > tr:hover > td {
    background: rgba(123, 47, 247, 0.18) !important;
}

#main-body.be-dashboard-page.be-invoices-page .dataTables_empty {
    padding: 40px 24px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
}

#main-body.be-dashboard-page.be-invoices-page #tableLoading {
    padding: 36px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

#main-body.be-dashboard-page.be-invoices-page .table-container .label.status {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-invoices-page .table-container .btn-info {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
}

@media (max-width: 600px) {
    #main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    #main-body.be-dashboard-page.be-invoices-page .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100% !important;
    }
}

/* =========================================================
   My Quotes (clientareaquotes) – dunkles Glas wie Invoices
   6 sichtbare Spalten + Download + responsive
   ========================================================= */
#main-body.be-dashboard-page.be-quotes-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

#main-body.be-dashboard-page.be-quotes-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-quotes-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0 !important;
    overflow: hidden;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .listtable {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    padding: 14px 18px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .listtable .dataTables_info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .listtable .dataTables_filter {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .listtable table.dataTable,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .listtable table.table-list {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_filter {
    float: none !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_filter label {
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    padding: 9px 12px 9px 42px !important;
    border-radius: 8px !important;
    width: min(100%, 260px) !important;
    height: auto !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#main-body.be-dashboard-page.be-quotes-page div.dataTables_wrapper div.dataTables_info {
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_length {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: rgba(8, 6, 28, 0.35) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_length label {
    padding: 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_length label .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    height: 32px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 16px !important;
    background: rgba(8, 6, 28, 0.35) !important;
    border-top: none !important;
    float: none !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_length,
    #main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_paginate {
        flex: 1 1 100% !important;
    }

    #main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        justify-content: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    }
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_paginate .pagination > li > a,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    background: rgba(123, 47, 247, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-quotes-page .pagination > .active > a,
#main-body.be-dashboard-page.be-quotes-page .pagination > .active > a:focus,
#main-body.be-dashboard-page.be-quotes-page .pagination > .active > a:hover,
#main-body.be-dashboard-page.be-quotes-page .pagination > .active > span {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th.sorting,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th.sorting_desc,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th.sorting_desc {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(232, 121, 249, 0.95) !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead tr:first-child th:first-child {
    border-top-left-radius: 10px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead tr:first-child th:nth-child(6) {
    border-top-right-radius: 10px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting:after,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting_asc:after,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting_desc:after,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    font-family: system-ui, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    bottom: auto !important;
    top: 50% !important;
    right: 8px !important;
    margin-top: -6px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting:after {
    content: "⇅" !important;
    opacity: 0.45 !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting_asc:after {
    content: "↑" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.dataTable thead .sorting_desc:after {
    content: "↓" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(1),
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(2) {
    text-align: left !important;
    padding-left: 14px !important;
    padding-right: 32px !important;
    white-space: nowrap !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(2) {
    white-space: normal !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(3),
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(4),
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(5),
#main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper table.table-list thead th:nth-child(6) {
    text-align: center !important;
    padding-left: 10px !important;
    padding-right: 30px !important;
    white-space: nowrap !important;
}

#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td:nth-child(1),
#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td:nth-child(2) {
    text-align: left !important;
}

#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td:nth-child(3),
#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td:nth-child(4),
#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td:nth-child(5),
#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td:nth-child(6) {
    text-align: center !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-quotes-page table.table-list tbody td {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-list > tbody > tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-list > tbody > tr:hover > td {
    background: rgba(123, 47, 247, 0.18) !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-container .label.status {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-container .btn-default.btn-sm {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-container .btn-default.btn-sm:hover {
    background: rgba(140, 69, 255, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-quotes-page .table-container .btn-info {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
}

#main-body.be-dashboard-page.be-quotes-page .dataTables_empty {
    padding: 40px 24px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
}

#main-body.be-dashboard-page.be-quotes-page #tableLoading {
    padding: 36px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 600px) {
    #main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    #main-body.be-dashboard-page.be-quotes-page .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100% !important;
    }
}

/* =========================================================
   My Support Tickets (supportticketslist) – 4 Spalten
   ========================================================= */
#main-body.be-dashboard-page.be-tickets-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

#main-body.be-dashboard-page.be-tickets-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-tickets-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-tickets-page .table-container {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 0 !important;
    overflow: hidden;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .listtable {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px 16px !important;
    padding: 14px 18px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .listtable .dataTables_info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .listtable .dataTables_filter {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .listtable table.dataTable,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .listtable table.table-list {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_filter {
    float: none !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_filter label {
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    padding: 9px 12px 9px 42px !important;
    border-radius: 8px !important;
    width: min(100%, 260px) !important;
    height: auto !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#main-body.be-dashboard-page.be-tickets-page div.dataTables_wrapper div.dataTables_info {
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: none !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_length {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background-color: rgba(8, 6, 28, 0.35) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_length label {
    padding: 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_length label .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    height: 32px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 16px !important;
    background: rgba(8, 6, 28, 0.35) !important;
    border-top: none !important;
    float: none !important;
    text-align: right !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_length,
    #main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_paginate {
        flex: 1 1 100% !important;
    }

    #main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        justify-content: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    }
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_paginate .pagination > li > a,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    background: rgba(123, 47, 247, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-tickets-page .pagination > .active > a,
#main-body.be-dashboard-page.be-tickets-page .pagination > .active > a:focus,
#main-body.be-dashboard-page.be-tickets-page .pagination > .active > a:hover,
#main-body.be-dashboard-page.be-tickets-page .pagination > .active > span {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th.sorting,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th.sorting_desc,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th.sorting_desc {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(232, 121, 249, 0.95) !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead tr:first-child th:first-child {
    border-top-left-radius: 10px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead tr:first-child th:last-child {
    border-top-right-radius: 10px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting:after,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting_asc:after,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting_desc:after,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    font-family: system-ui, "Segoe UI", sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    bottom: auto !important;
    top: 50% !important;
    right: 10px !important;
    margin-top: -6px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting:after {
    content: "⇅" !important;
    opacity: 0.45 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting_asc:after {
    content: "↑" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.dataTable thead .sorting_desc:after {
    content: "↓" !important;
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th:nth-child(1),
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th:nth-child(2) {
    text-align: left !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th:nth-child(3),
#main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper table.table-list thead th:nth-child(4) {
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 34px !important;
}

#main-body.be-dashboard-page.be-tickets-page table.table-list tbody td {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-tickets-page table.table-list tbody td:nth-child(1) {
    text-align: left !important;
}

#main-body.be-dashboard-page.be-tickets-page table.table-list tbody td:nth-child(2) {
    text-align: left !important;
}

#main-body.be-dashboard-page.be-tickets-page table.table-list tbody td:nth-child(3),
#main-body.be-dashboard-page.be-tickets-page table.table-list tbody td:nth-child(4) {
    text-align: center !important;
}

#main-body.be-dashboard-page.be-tickets-page .table-list > tbody > tr:nth-child(even) > td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-tickets-page .table-list > tbody > tr:hover > td {
    background: rgba(123, 47, 247, 0.18) !important;
}

#main-body.be-dashboard-page.be-tickets-page .table-container tbody td a.border-left {
    display: block !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-left: 14px !important;
    margin-left: 4px !important;
    text-decoration: none !important;
}

#main-body.be-dashboard-page.be-tickets-page .table-container tbody td a.border-left:hover {
    border-left-color: rgba(244, 114, 212, 0.55) !important;
}

#main-body.be-dashboard-page.be-tickets-page .ticket-number {
    color: rgba(167, 139, 250, 0.95) !important;
    font-weight: 700 !important;
    margin-right: 8px !important;
}

#main-body.be-dashboard-page.be-tickets-page .ticket-subject {
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-tickets-page .ticket-subject.unread {
    font-weight: 700 !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-tickets-page .table-container .label.status {
    border-radius: 6px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-tickets-page .dataTables_empty {
    padding: 40px 24px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
}

#main-body.be-dashboard-page.be-tickets-page #tableLoading {
    padding: 36px 20px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 600px) {
    #main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_filter {
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    #main-body.be-dashboard-page.be-tickets-page .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100% !important;
    }
}

/* =========================================================
   Ticket erstellen (submitticket.php – alle Schritte)
   body.be-body-submitticket: Fallback, falls nur Dateiname passt ($filename).
   ========================================================= */
body.be-body-submitticket section#main-body,
body.be-body-submitticket #main-body {
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.1), transparent 45%),
        linear-gradient(135deg, #0f0c29, #302b63, #24243e) !important;
    background-color: #0f0c29 !important;
    padding-bottom: 48px !important;
    font-family: Rubik, "Open Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.be-body-submitticket #main-body > .container {
    background: transparent !important;
}

body.be-body-submitticket #main-body .header-lined h1 {
    color: #fff !important;
    border-bottom: none !important;
}

body.be-body-submitticket #main-body .header-lined h1 small {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.be-body-submitticket #main-body .breadcrumb > li > a {
    color: rgba(244, 114, 212, 0.95) !important;
}

body.be-body-submitticket #main-body .breadcrumb > .active {
    color: rgba(255, 255, 255, 0.45) !important;
}

body.be-body-submitticket #main-body .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .main-content,
body.be-body-submitticket #main-body .main-content {
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 18px !important;
    padding-bottom: 48px !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .main-content > *,
body.be-body-submitticket #main-body .main-content > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-body.be-dashboard-page.be-submitticket-page .header-lined,
body.be-body-submitticket #main-body .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-ticket-lead,
body.be-body-submitticket #main-body .be-submit-ticket-lead,
#main-body.be-dashboard-page.be-submitticket-page .main-content > p:not(.text-center),
body.be-body-submitticket #main-body .main-content > p:not(.text-center) {
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
    font-size: 15px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-ticket-stepone,
body.be-body-submitticket #main-body .be-submit-ticket-stepone {
    width: 100%;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-grid,
body.be-body-submitticket #main-body .be-submit-dept-grid {
    margin-top: 8px;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

@media (max-width: 991px) {
    #main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-grid,
    body.be-body-submitticket #main-body .be-submit-dept-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    #main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-grid,
    body.be-body-submitticket #main-body .be-submit-dept-grid {
        grid-template-columns: 1fr !important;
    }
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-col,
body.be-body-submitticket #main-body .be-submit-dept-col {
    margin-bottom: 0 !important;
    min-width: 0 !important;
    float: none !important;
    width: auto !important;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card, body.be-body-submitticket #main-body .be-submit-dept-card{
    height: 100%;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__link, body.be-body-submitticket #main-body .be-submit-dept-card__link{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__link:hover,
body.be-body-submitticket #main-body .be-submit-dept-card__link:hover,
#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__link:focus,
body.be-body-submitticket #main-body .be-submit-dept-card__link:focus {
    background: rgba(140, 69, 255, 0.18) !important;
    color: #fff !important;
    outline: none !important;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__icon, body.be-body-submitticket #main-body .be-submit-dept-card__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.45), rgba(200, 80, 192, 0.35));
    color: #fff !important;
    font-size: 16px;
    flex-shrink: 0;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__title, body.be-body-submitticket #main-body .be-submit-dept-card__title{
    flex: 1 1 auto;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__chev, body.be-body-submitticket #main-body .be-submit-dept-card__chev{
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 13px;
    transition: transform 0.2s ease, color 0.2s ease;
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__link:hover .be-submit-dept-card__chev, body.be-body-submitticket #main-body .be-submit-dept-card__link:hover .be-submit-dept-card__chev{
    color: rgba(255, 255, 255, 0.85) !important;
    transform: translateX(3px);
}

#main-body.be-dashboard-page.be-submitticket-page .be-submit-dept-card__desc, body.be-body-submitticket #main-body .be-submit-dept-card__desc{
    margin: 0 !important;
    padding: 12px 18px 16px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.58) !important;
}

/* Standard-WHMCS Abteilungsliste (Fallback ohne Karten-Markup) */
#main-body.be-dashboard-page.be-submitticket-page .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col),
body.be-body-submitticket #main-body .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) strong a,
body.be-body-submitticket #main-body .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) strong a {
    color: #fff !important;
    font-weight: 700 !important;
}

#main-body.be-dashboard-page.be-submitticket-page .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) strong a:hover,
body.be-body-submitticket #main-body .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) strong a:hover {
    color: rgba(244, 114, 212, 0.98) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) .fa-envelope,
body.be-body-submitticket #main-body .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) .fa-envelope {
    color: rgba(244, 114, 212, 0.95) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) p,
body.be-body-submitticket #main-body .main-content .col-md-6.margin-bottom:not(.be-submit-dept-col) p {
    color: rgba(255, 255, 255, 0.58) !important;
}

/* Clientbereich: Account-Seiten (Details, Kontakte, E-Mail, …) — wie Dashboard/Ticket */
#main-body.be-dashboard-page.be-client-account-page .main-content {
    padding-top: 18px !important;
    padding-bottom: 48px !important;
}

#main-body.be-dashboard-page.be-client-account-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 4px !important;
    padding-top: 10px !important;
}

/* Floats in der Breadcrumb-Leiste dürfen den folgenden Seiteninhalt nicht überdecken */
#main-body.be-dashboard-page.be-client-account-page .header-lined::after {
    content: "";
    display: table;
    clear: both;
}

/* Breadcrumb ohne Floats: verhindert, dass der Rest der Hauptspalte daneben „hängt“ */
#main-body.be-dashboard-page.be-client-account-page .header-lined .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    float: none !important;
    list-style: none !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .header-lined .breadcrumb > li {
    float: none !important;
}

#main-body.be-dashboard-page.be-client-account-page .breadcrumb > li > a {
    color: rgba(244, 114, 212, 0.95) !important;
}

#main-body.be-dashboard-page.be-client-account-page .breadcrumb > .active {
    color: rgba(255, 255, 255, 0.45) !important;
}

#main-body.be-dashboard-page.be-client-account-page .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 26px 24px 30px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flow-root !important;
    margin-bottom: 8px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .section-title {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 18px 0 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-group {
    margin-bottom: 18px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .control-label,
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form label.control-label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 42px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form input#inputPostcode.form-control {
    border: 1px solid rgba(140, 69, 255, 0.45) !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(12, 8, 28, 0.92) 100%) !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form input#inputPostcode.form-control:focus {
    border-color: rgba(244, 114, 212, 0.75) !important;
    box-shadow:
        0 0 0 2px rgba(140, 69, 255, 0.35),
        0 14px 36px rgba(0, 0, 0, 0.45) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-control[disabled],
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-control:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form select.form-control {
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .be-select select.form-control,
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .be-select__native {
    background-image: none !important;
    padding-right: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__section-title {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 8px 0 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__checkboxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__check-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__check-label input[type="checkbox"] {
    margin-top: 4px !important;
    accent-color: #8c45ff;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__email-prefs {
    margin-top: 8px !important;
    padding-top: 8px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__marketing,
#main-body.be-dashboard-page.be-client-account-page .marketing-email-optin {
    margin-top: 20px !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__marketing h4,
#main-body.be-dashboard-page.be-client-account-page .marketing-email-optin h4 {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__marketing p,
#main-body.be-dashboard-page.be-client-account-page .marketing-email-optin p {
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.55 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__actions {
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__actions .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__actions .btn-primary:hover,
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__actions .btn-primary:focus {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__actions .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form__actions .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

/* Buttons in .form-group (z. B. User Profile) — gleiches Erscheinungsbild wie __actions, ohne Layout zu ändern */
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .btn-primary:hover,
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .btn-primary:focus {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .label.label-default {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .label.label-success {
    background: rgba(34, 197, 94, 0.22) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-client-account-page .help-block {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* User Password / clientarea changepw — Stärke-Balken, Generate, Feedback-Icons (nur Look) */
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form.form-horizontal .progress {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form.form-horizontal .progress-bar {
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .generate-password {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .generate-password:hover,
#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .generate-password:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-group.has-feedback .form-control-feedback {
    color: rgba(255, 255, 255, 0.45) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-group.has-success .form-control-feedback {
    color: #86efac !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-group.has-warning .form-control-feedback {
    color: #fcd34d !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .form-group.has-error .form-control-feedback {
    color: #fca5a5 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-client-account-form .btn-primary:disabled {
    opacity: 0.5 !important;
}

/* User Security — 2FA-Texte, verschachtelte Alerts, Success/Danger (nur Look) */
#main-body.be-dashboard-page.be-client-account-page .main-content .twofa-config-link {
    color: rgba(255, 255, 255, 0.72) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .twofa-config-link strong {
    color: #fff !important;
    font-weight: 700 !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .alert.alert-warning {
    background: rgba(234, 179, 8, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .alert.alert-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .alert.alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .btn-success {
    background: linear-gradient(135deg, #22c55e, #15803d) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .btn-success:hover,
#main-body.be-dashboard-page.be-client-account-page .main-content .btn-success:focus {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .btn-danger:hover,
#main-body.be-dashboard-page.be-client-account-page .main-content .btn-danger:focus {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

/* ===== Contacts / Add Contact Page ===== */

/* Contact picker bar */
#main-body.be-dashboard-page.be-client-account-page .alert.alert-info,
#main-body.be-dashboard-page.be-client-account-page .alert.alert-block.alert-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 24px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
}

#main-body.be-dashboard-page.be-client-account-page .alert.alert-info .control-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 42px !important;
}

#main-body.be-dashboard-page.be-client-account-page .alert.alert-info select.form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
}

#main-body.be-dashboard-page.be-client-account-page .alert.alert-info select.form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-client-account-page .alert.alert-info .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-height: 42px !important;
    transition: all 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page .alert.alert-info .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Contact form — same card style as Account Details */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 26px 24px 30px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flow-root !important;
    margin-bottom: 8px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-group {
    margin-bottom: 18px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .control-label,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form label.control-label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 42px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select select.form-control,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__native,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select select.form-control,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__native {
    background-image: none !important;
    padding-right: 0 !important;
}

/* Checkbox labels */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .checkbox label,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .controls.checkbox label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .checkbox input[type="checkbox"],
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .controls input[type="checkbox"] {
    accent-color: #8c45ff !important;
}

/* Sub-account well */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .well,
#main-body.be-dashboard-page.be-client-account-page #subacct-container {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    box-shadow: none !important;
    padding: 20px 22px !important;
    margin-top: 8px !important;
    margin-bottom: 22px !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .full.control-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .btn-check-all {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .btn-check-all:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .generate-password {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .generate-password:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Email Preferences section */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form > .form-group > h3 {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 20px 0 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Action buttons row */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form > .form-group.text-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    margin-top: 28px !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: filter 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .btn-primary:hover {
    filter: brightness(1.1) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .btn-danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form > .form-group.text-center {
    gap: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .controls.checkbox {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .controls.checkbox br {
    display: none !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-horizontal .control-label {
    color: rgba(255, 255, 255, 0.78) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-horizontal .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .form-horizontal .control-label {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    padding-top: 10px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .form-horizontal .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > .alert.alert-success,
#main-body.be-dashboard-page.be-client-account-page .main-content > .alert.alert-danger,
#main-body.be-dashboard-page.be-client-account-page .main-content > .alert.alert-warning {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > .alert.alert-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > .alert.alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > .alert.alert-warning {
    background: rgba(234, 179, 8, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Linked Accounts heading */
#main-body.be-dashboard-page.be-client-account-page #subacct-container h3 {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 16px !important;
}

/* ===== User Management Page ===== */
#main-body.be-dashboard-page.be-client-account-page .main-content > p:first-of-type {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    margin-bottom: 16px !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 20px !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped th {
    background: rgba(140, 69, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped td {
    padding: 14px 20px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.03) !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped > tbody > tr:nth-of-type(even) {
    background: transparent !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped > tbody > tr:hover {
    background: rgba(140, 69, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped td small {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 12px !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .label-info {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    letter-spacing: 0.03em !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .fa-shield {
    font-size: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .text-success {
    color: #4ade80 !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .text-grey {
    color: rgba(255, 255, 255, 0.3) !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped td:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .btn-default,
#main-body.be-dashboard-page.be-client-account-page .table.table-striped .btn-default.btn-sm {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .btn-danger,
#main-body.be-dashboard-page.be-client-account-page .table.table-striped .btn-danger.btn-sm {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped .btn-danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .table.table-striped td strong {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > p {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > h2 {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-top: 32px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > h2 + p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .form-group > input.form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .form-group > input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .form-group > input.form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .radio-inline,
#main-body.be-dashboard-page.be-client-account-page .main-content .checkbox-inline {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .radio-inline input[type="radio"] {
    accent-color: #8c45ff !important;
    margin-right: 4px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content .checkbox-inline input[type="checkbox"] {
    accent-color: #8c45ff !important;
    margin-right: 4px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .btn-info,
#main-body.be-dashboard-page.be-client-account-page .main-content > form > button.btn-info {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 24px !important;
    min-height: 44px !important;
    font-size: 14px !important;
    transition: filter 0.2s ease !important;
    cursor: pointer !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .btn-info:hover,
#main-body.be-dashboard-page.be-client-account-page .main-content > form > button.btn-info:hover {
    filter: brightness(1.1) !important;
}

#main-body.be-dashboard-page.be-client-account-page .well {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    box-shadow: none !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
    margin-bottom: 18px !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-content {
    background: rgba(15, 12, 41, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-content.panel-primary {
    border-color: rgba(140, 69, 255, 0.35) !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-header,
#main-body.be-dashboard-page.be-client-account-page .modal-header.panel-heading {
    background: rgba(140, 69, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 18px 24px !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-header .close {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 24px !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-header .close:hover {
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-body {
    padding: 20px 24px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.6 !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px 24px !important;
    background: transparent !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-footer .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-footer .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-footer .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
}

#main-body.be-dashboard-page.be-client-account-page .modal-footer .btn-primary:hover {
    filter: brightness(1.1) !important;
}

/* Permissions page */
#main-body.be-dashboard-page.be-client-account-page .main-content > h3,
#main-body.be-dashboard-page.be-client-account-page .main-content > form > h3 {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > .btn-primary:hover {
    filter: brightness(1.1) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > p > .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > p > .btn-primary:hover {
    filter: brightness(1.1) !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > p > .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-client-account-page .main-content > form > p > .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* ===== Email History Page ===== */
#main-body.be-dashboard-page.be-client-account-page .table-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden !important;
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper {
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .listtable {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 14px 18px !important;
    background: rgba(8, 6, 28, 0.35) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .listtable .dataTables_info {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    background: transparent !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .listtable .dataTables_filter {
    order: 2 !important;
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_filter label {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    color: #fff !important;
    padding: 8px 14px 8px 38px !important;
    min-width: 220px !important;
    min-height: 38px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_filter label .form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_filter label .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .listtable table.dataTable,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .listtable table.table-list {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th.sorting,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th.sorting_desc,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th.sorting_disabled {
    background: rgba(140, 69, 255, 0.15) !important;
    background-color: rgba(140, 69, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-top: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 14px 18px !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th.sorting_asc,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list thead th.sorting_desc {
    box-shadow: inset 0 -3px 0 rgba(232, 121, 249, 0.9) !important;
}

/* Sorting icons */
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting:after,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting_asc:after,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting_desc:after,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting_asc_disabled:after,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting_desc_disabled:after {
    font-family: system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting:after {
    opacity: 0.4 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting_asc:after {
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.dataTable thead .sorting_desc:after {
    color: rgba(232, 201, 255, 0.95) !important;
    opacity: 1 !important;
}

/* Table body rows */
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list tbody td {
    padding: 14px 18px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    vertical-align: middle !important;
    background: transparent !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.025) !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list tbody tr:hover td {
    background: rgba(140, 69, 255, 0.08) !important;
    cursor: pointer !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_empty {
    padding: 40px 24px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 15px !important;
}

/* View Message button */
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list .btn-info,
#main-body.be-dashboard-page.be-client-account-page .table-container .btn-info {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 7px 16px !important;
    transition: filter 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list .btn-info:hover,
#main-body.be-dashboard-page.be-client-account-page .table-container .btn-info:hover {
    filter: brightness(1.1) !important;
}

/* Paperclip icon */
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper table.table-list .fa-paperclip {
    color: rgba(255, 255, 255, 0.45) !important;
    margin-left: 6px !important;
}

/*
 * Footer: DataTables rendert „Show X entries“ (length) und Pagination nebeneinander.
 * Das native <select> bleibt oft weiß → hässlicher Block. Bei E-Mail-Verlauf ist
 * die Längenauswahl überflüssig → ausblenden, Pagination zentriert in einer Zeile.
 */
#tableEmailsList_wrapper.dataTables_wrapper .dataTables_length {
    display: none !important;
}

#main-body.be-dashboard-page.be-client-account-page #tableEmailsList_wrapper.dataTables_wrapper .dataTables_paginate {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 14px 18px 16px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    float: none !important;
    display: flex !important;
}

/* Andere Client-Account-Tabellen (falls vorhanden): dunkles Length, kein Weiß */
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_length {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: rgba(8, 6, 28, 0.45) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_length label {
    padding: 14px 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_length label .form-control,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_length select {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 4px 28px 4px 10px !important;
    font-size: 13px !important;
    width: auto !important;
    min-width: 64px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate {
    padding: 12px 18px 14px !important;
    background: rgba(8, 6, 28, 0.45) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    float: none !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > li > a,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    transition: all 0.15s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover {
    background: rgba(140, 69, 255, 0.25) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > .active > a,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > .active > span {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border-color: transparent !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
#main-body.be-dashboard-page.be-client-account-page .dataTables_wrapper .dataTables_paginate .pagination > .disabled > span {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    cursor: not-allowed !important;
}

/* Loading spinner */
#main-body.be-dashboard-page.be-client-account-page #tableLoading {
    padding: 40px !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

#main-body.be-dashboard-page.be-client-account-page #tableLoading .fa-spinner {
    color: rgba(140, 69, 255, 0.8) !important;
}

/* Formular Schritt 2 */
#main-body.be-dashboard-page.be-submitticket-page form[role="form"], body.be-body-submitticket #main-body form[role="form"]{
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 24px 22px 28px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#main-body.be-dashboard-page.be-submitticket-page .form-group label, body.be-body-submitticket #main-body .form-group label{
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
}

#main-body.be-dashboard-page.be-submitticket-page .form-control, body.be-body-submitticket #main-body .form-control{
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 42px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .form-control:focus, body.be-body-submitticket #main-body .form-control:focus{
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

#main-body.be-dashboard-page.be-submitticket-page textarea.form-control, body.be-body-submitticket #main-body textarea.form-control{
    min-height: 200px !important;
    resize: vertical !important;
}

#main-body.be-dashboard-page.be-submitticket-page .form-control.disabled,
body.be-body-submitticket #main-body .form-control.disabled,
#main-body.be-dashboard-page.be-submitticket-page .form-control[disabled],
body.be-body-submitticket #main-body .form-control[disabled] {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

#main-body.be-dashboard-page.be-submitticket-page select.form-control, body.be-body-submitticket #main-body select.form-control{
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Bootstrap-Markdown: Toolbar & Footer (sonst weiß aus styles.css / all.css) */
#main-body.be-dashboard-page.be-submitticket-page .md-editor,
body.be-body-submitticket #main-body .md-editor {
    display: block !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor > .md-header,
body.be-body-submitticket #main-body .md-editor > .md-header,
#main-body.be-dashboard-page.be-submitticket-page .md-editor > .btn-toolbar,
body.be-body-submitticket #main-body .md-editor > .btn-toolbar {
    margin: 0 !important;
    padding: 10px 12px !important;
    background: rgba(18, 12, 40, 0.82) !important;
    background-color: rgba(18, 12, 40, 0.82) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Toolbar: gleiche Zeilenhöhe, kein „riesiges“ Preview */
#main-body.be-dashboard-page.be-submitticket-page .md-editor > .btn-toolbar,
body.be-body-submitticket #main-body .md-editor > .btn-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-group,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-group {
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar > .btn-group:has(.btn-primary),
body.be-body-submitticket #main-body .md-editor .btn-toolbar > .btn-group:has(.btn-primary) {
    margin-left: auto !important;
    padding-left: 12px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    gap: 6px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .md-controls,
body.be-body-submitticket #main-body .md-editor .md-controls {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 2px !important;
}

/* Vollbild: per JS deaktiviert; zusätzlich ausblenden (z. B. gecachtes scripts.min.js) */
.md-editor .md-controls:has(.md-control-fullscreen) {
    display: none !important;
}
.md-editor a.md-control-fullscreen {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .md-footer,
body.be-body-submitticket #main-body .md-editor .md-footer {
    display: block !important;
    padding: 8px 12px !important;
    background: rgba(18, 12, 40, 0.82) !important;
    background-color: rgba(18, 12, 40, 0.82) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor > textarea,
#main-body.be-dashboard-page.be-submitticket-page .md-editor > textarea.markdown-editor,
body.be-body-submitticket #main-body .md-editor > textarea,
body.be-body-submitticket #main-body .md-editor > textarea.markdown-editor {
    padding: 14px 15px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.28) !important;
    background-color: rgba(0, 0, 0, 0.28) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor > textarea:focus,
body.be-body-submitticket #main-body .md-editor > textarea:focus {
    background: rgba(0, 0, 0, 0.38) !important;
    color: #fff !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor > .md-preview,
body.be-body-submitticket #main-body .md-editor > .md-preview {
    padding: 14px 15px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-submitticket-page div.md-editor.active,
body.be-body-submitticket #main-body div.md-editor.active {
    border-color: rgba(140, 69, 255, 0.45) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.2) !important;
    -webkit-box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.2) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .markdown-editor-status,
body.be-body-submitticket #main-body .markdown-editor-status {
    padding: 4px 10px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.52) !important;
    text-align: right !important;
    font-size: 11px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn.btn-sm:not(.btn-primary),
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn.btn-xs:not(.btn-primary),
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn.btn-sm:not(.btn-primary),
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn.btn-xs:not(.btn-primary) {
    padding: 0 !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary.btn-sm,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary.btn-sm {
    padding: 0 16px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn:not(.btn-primary),
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-default,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn:not(.btn-primary),
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-default {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn:not(.btn-primary):hover,
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-default:hover,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn:not(.btn-primary):hover,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-default:hover {
    background: rgba(140, 69, 255, 0.2) !important;
    border-color: rgba(244, 114, 212, 0.32) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn:not(.btn-primary).active,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn:not(.btn-primary).active {
    background: rgba(140, 69, 255, 0.28) !important;
    border-color: rgba(244, 114, 212, 0.42) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: auto !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #6d28d9, #a21caf) !important;
    border: 1px solid rgba(167, 139, 250, 0.35) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 10px rgba(109, 40, 217, 0.28) !important;
    white-space: nowrap !important;
    -webkit-font-smoothing: antialiased !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary .glyphicon,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary .glyphicon {
    position: static !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary .fas,
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary .far,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary .fas,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary .far {
    flex-shrink: 0 !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary:hover,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary:hover {
    filter: brightness(1.05) !important;
    color: #fff !important;
    border-color: rgba(196, 181, 253, 0.45) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn:focus,
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn:active,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn:focus,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn:active {
    outline: none !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-default:focus,
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-default:active,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-default:focus,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-default:active {
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary:focus,
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn-primary:active,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary:focus,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn-primary:active {
    color: #fff !important;
    outline: none !important;
    border-color: rgba(196, 181, 253, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.4), 0 2px 10px rgba(109, 40, 217, 0.28) !important;
}

/* Icon-Buttons: Glyphen / FA eine Zeile */
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .glyphicon,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .glyphicon {
    font-size: 13px !important;
    line-height: 1 !important;
    top: 0 !important;
    color: inherit !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn .fas,
#main-body.be-dashboard-page.be-submitticket-page .md-editor .btn-toolbar .btn .far,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn .fas,
body.be-body-submitticket #main-body .md-editor .btn-toolbar .btn .far {
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .md-controls .md-control,
body.be-body-submitticket #main-body .md-editor .md-controls .md-control {
    box-sizing: border-box !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .md-controls .md-control:hover,
body.be-body-submitticket #main-body .md-editor .md-controls .md-control:hover {
    background: rgba(140, 69, 255, 0.2) !important;
    border-color: rgba(244, 114, 212, 0.32) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .md-controls .md-control:focus,
body.be-body-submitticket #main-body .md-editor .md-controls .md-control:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .md-editor .glyphicon,
body.be-body-submitticket #main-body .md-editor .glyphicon {
    color: inherit !important;
}

#main-body.be-dashboard-page.be-submitticket-page .ticket-attachments-message,
body.be-body-submitticket #main-body .ticket-attachments-message,
#main-body.be-dashboard-page.be-submitticket-page .text-muted,
body.be-body-submitticket #main-body .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

#main-body.be-dashboard-page.be-submitticket-page input[type="file"].form-control,
body.be-body-submitticket #main-body input[type="file"].form-control {
    padding: 10px 12px !important;
    line-height: 1.4 !important;
    background: rgba(0, 0, 0, 0.22) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    cursor: pointer !important;
}

#main-body.be-dashboard-page.be-submitticket-page input[type="file"].form-control::file-selector-button,
body.be-body-submitticket #main-body input[type="file"].form-control::file-selector-button {
    margin-right: 14px !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.45), rgba(200, 80, 192, 0.38)) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    cursor: pointer !important;
}

#main-body.be-dashboard-page.be-submitticket-page input[type="file"].form-control::-webkit-file-upload-button,
body.be-body-submitticket #main-body input[type="file"].form-control::-webkit-file-upload-button {
    margin-right: 14px !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.45), rgba(200, 80, 192, 0.38)) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    cursor: pointer !important;
}

#main-body.be-dashboard-page.be-submitticket-page .well, body.be-body-submitticket #main-body .well{
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-submitticket-page .btn-primary, body.be-body-submitticket #main-body .btn-primary{
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .btn-primary:hover,
body.be-body-submitticket #main-body .btn-primary:hover,
#main-body.be-dashboard-page.be-submitticket-page .btn-primary:focus,
body.be-body-submitticket #main-body .btn-primary:focus {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-submitticket-page .btn-default, body.be-body-submitticket #main-body .btn-default{
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-submitticket-page .btn-default:hover, body.be-body-submitticket #main-body .btn-default:hover{
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-submitticket-page .alert, body.be-body-submitticket #main-body .alert{
    border-radius: 12px !important;
    border-width: 1px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .alert-info, body.be-body-submitticket #main-body .alert-info{
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .alert-danger, body.be-body-submitticket #main-body .alert-danger{
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .alert-success, body.be-body-submitticket #main-body .alert-success{
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.38) !important;
    color: rgba(255, 255, 255, 0.94) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .alert-success .alert-link, body.be-body-submitticket #main-body .alert-success .alert-link{
    color: #fff !important;
    text-decoration: underline !important;
}

/* KB-Vorschläge (Schritt 3) */
#main-body.be-dashboard-page.be-submitticket-page h3, body.be-body-submitticket #main-body h3{
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .kbarticles, body.be-body-submitticket #main-body .kbarticles{
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
}

#main-body.be-dashboard-page.be-submitticket-page .kbarticles p, body.be-body-submitticket #main-body .kbarticles p{
    margin-bottom: 10px !important;
    color: rgba(255, 255, 255, 0.78) !important;
}

#main-body.be-dashboard-page.be-submitticket-page .kbarticles a, body.be-body-submitticket #main-body .kbarticles a{
    color: rgba(244, 114, 212, 0.95) !important;
}

/* Bestätigung */
#main-body.be-dashboard-page.be-submitticket-page .main-content .text-center, body.be-body-submitticket #main-body .main-content .text-center{
    color: rgba(255, 255, 255, 0.88) !important;
}

/* =========================================================
   Downloads & Download-Kategorie (downloads / downloadscat)
   ========================================================= */
#main-body.be-dashboard-page.be-downloads-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-downloads-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-downloads-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-downloads-page .main-content > p {
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

#main-body.be-dashboard-page.be-downloads-page h2 {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-top: 28px !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-downloads-page .kb-search {
    margin-bottom: 24px !important;
    max-width: 640px !important;
}

#main-body.be-dashboard-page.be-downloads-page .kb-search .form-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-radius: 10px 0 0 10px !important;
    height: 50px !important;
    font-size: 15px !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-downloads-page .kb-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}

#main-body.be-dashboard-page.be-downloads-page .kb-search .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 0 10px 10px 0 !important;
    font-weight: 600 !important;
    min-height: 50px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

#main-body.be-dashboard-page.be-downloads-page .kb-search .btn-primary:hover {
    filter: brightness(1.06) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-downloads-page .row .col-sm-6 {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.55 !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2) !important;
}

#main-body.be-dashboard-page.be-downloads-page .row .col-sm-6 > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(244, 114, 212, 0.98) !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-downloads-page .row .col-sm-6 > a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

#main-body.be-dashboard-page.be-downloads-page .row .col-sm-6 > a .far {
    opacity: 0.85 !important;
}

#main-body.be-dashboard-page.be-downloads-page .list-group {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(8, 6, 28, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
}

#main-body.be-dashboard-page.be-downloads-page .list-group-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 16px 18px !important;
}

#main-body.be-dashboard-page.be-downloads-page a.list-group-item {
    transition: background 0.15s ease !important;
}

#main-body.be-dashboard-page.be-downloads-page a.list-group-item:hover {
    background: rgba(123, 47, 247, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-downloads-page .list-group-item strong {
    color: rgba(255, 255, 255, 0.95) !important;
}

#main-body.be-dashboard-page.be-downloads-page .list-group-item .fa-download {
    color: rgba(167, 139, 250, 0.95) !important;
    margin-right: 6px !important;
}

#main-body.be-dashboard-page.be-downloads-page .list-group-item small {
    color: rgba(255, 255, 255, 0.5) !important;
}

#main-body.be-dashboard-page.be-downloads-page .list-group-item.text-center {
    color: rgba(255, 255, 255, 0.55) !important;
}

#main-body.be-dashboard-page.be-downloads-page .text-muted {
    color: rgba(255, 255, 255, 0.42) !important;
}

#main-body.be-dashboard-page.be-downloads-page .fontsize3 {
    color: rgba(255, 255, 255, 0.6) !important;
}

#main-body.be-dashboard-page.be-downloads-page .alert {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-downloads-page .alert-info {
    background: rgba(120, 50, 200, 0.22) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-downloads-page .kb-search .input-group-btn {
        display: block !important;
        width: 100% !important;
    }

    #main-body.be-dashboard-page.be-downloads-page .kb-search .form-control {
        border-radius: 10px 10px 0 0 !important;
    }

    #main-body.be-dashboard-page.be-downloads-page .kb-search .btn-primary {
        width: 100% !important;
        border-radius: 0 0 10px 10px !important;
    }
}

/* =========================================================
   Network / Server Status (serverstatus)
   ========================================================= */
#main-body.be-dashboard-page.be-serverstatus-page .main-content {
    align-items: stretch !important;
    padding-top: 18px !important;
    padding-bottom: 40px !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .main-content > * {
    max-width: 100% !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .main-content > p {
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.6 !important;
}

#main-body.be-dashboard-page.be-serverstatus-page h2 {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Keine Störungen – Alert im dunklen Grün-Glas statt Neon */
#main-body.be-dashboard-page.be-serverstatus-page .alert {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .alert-success {
    background: rgba(22, 101, 52, 0.35) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
    color: rgba(220, 252, 231, 0.96) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .btn-group {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 8px !important;
    margin-bottom: 20px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .btn-group > .btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .btn-group > .btn:hover:not(.disabled) {
    background: rgba(140, 69, 255, 0.22) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .btn-group > .btn.disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
    margin-bottom: 18px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel.panel-warning {
    border-color: rgba(251, 191, 36, 0.45) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel.panel-info {
    border-color: rgba(96, 165, 250, 0.45) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel-heading {
    background: rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 12px 16px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel .list-group {
    border-radius: 0 0 12px 12px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel .list-group-item {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .panel .list-group-item p {
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .list-group-item-danger {
    background: rgba(127, 29, 29, 0.45) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .list-group-item-warning {
    background: rgba(120, 53, 15, 0.45) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .list-group-item-success {
    background: rgba(20, 83, 45, 0.4) !important;
    color: #bbf7d0 !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .list-group-item-info {
    background: rgba(30, 58, 138, 0.45) !important;
    color: #dbeafe !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table-responsive {
    margin-top: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(8, 6, 28, 0.35) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table {
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table > thead > tr > th {
    background: rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 12px 10px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table > tbody > tr > td {
    background: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    vertical-align: middle !important;
    padding: 12px 10px !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table > tbody > tr:hover > td {
    background: rgba(123, 47, 247, 0.15) !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table a {
    color: rgba(244, 114, 212, 0.98) !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-serverstatus-page .table a:hover {
    color: #fff !important;
}

/* =========================================================
   Knowledgebase + Dashboard-Shell (knowledgebase / cat / article)
   Gleicher Verlauf wie Client Area; Overrides gegen Dashboard-Zentrierung
   ========================================================= */
#main-body.be-dashboard-page.be-knowledgebase-page .main-content {
    display: block !important;
    align-items: stretch !important;
    padding: 48px 12px 80px !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .main-content > * {
    max-width: 100% !important;
}

@media (min-width: 992px) {
    #main-body.be-dashboard-page.be-knowledgebase-page .main-content.col-md-9 {
        padding-left: 12px !important;
        padding-right: 20px !important;
    }

    #main-body.be-dashboard-page.be-knowledgebase-page .sidebar.col-md-3 {
        padding: 48px 12px 80px !important;
    }

    /* Mobile-Duplikat-Panels aus dem Layout (sonst riesiger Flex-Zwischenraum) */
    #main-body.be-dashboard-page.be-knowledgebase-page .sidebar > .panel.hidden-lg,
    #main-body.be-dashboard-page.be-knowledgebase-page .sidebar > .panel.hidden-md {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        flex: 0 0 0 !important;
    }
}

/* Sidebar-Karten: wieder 6px wie .has-kb-page (nicht 16px von .be-dashboard-page) */
#main-body.be-dashboard-page.be-knowledgebase-page .sidebar {
    justify-content: flex-start !important;
    align-content: flex-start !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .sidebar .panel.panel-sidebar {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .sidebar > .panel.panel-sidebar ~ .panel.panel-sidebar {
    margin-bottom: 0 !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .header-lined {
    text-align: left !important;
    margin: 0 0 28px !important;
    padding: 0 0 8px !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .header-lined h1 {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .header-lined h1 small {
    display: inline !important;
    margin-left: 10px !important;
    margin-top: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .breadcrumb {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .be-kb-cat-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.25) !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .be-kb-articles {
    background: rgba(8, 6, 28, 0.42) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.22) !important;
}

#main-body.be-dashboard-page.be-knowledgebase-page .be-kb-alert-wrap .alert,
#main-body.be-dashboard-page.be-knowledgebase-page .be-kb-alert-wrap .alert-info {
    background: rgba(120, 50, 200, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* =========================================================
   Markdown Guide – Ajax-Modal (#modalAjax), dunkles Glass-Layout
   ========================================================= */
#modalAjax.be-markdown-guide-modal .modal-dialog,
#modalAjax:has(.be-markdown-guide) .modal-dialog {
    max-width: 900px !important;
}

#modalAjax.be-markdown-guide-modal .modal-content.panel-primary,
#modalAjax:has(.be-markdown-guide) .modal-content.panel-primary {
    background: rgba(14, 10, 36, 0.97) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
    overflow: hidden !important;
}

#modalAjax.be-markdown-guide-modal .modal-header.panel-heading,
#modalAjax:has(.be-markdown-guide) .modal-header.panel-heading {
    background: linear-gradient(135deg, rgba(109, 40, 217, 0.72), rgba(162, 28, 175, 0.5)) !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 16px 22px !important;
    border-radius: 0 !important;
}

#modalAjax.be-markdown-guide-modal .modal-title,
#modalAjax:has(.be-markdown-guide) .modal-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: -0.02em !important;
}

#modalAjax.be-markdown-guide-modal .modal-header .close,
#modalAjax:has(.be-markdown-guide) .modal-header .close {
    color: #fff !important;
    opacity: 0.88 !important;
    text-shadow: none !important;
    font-weight: 300 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    margin-top: -2px !important;
}

#modalAjax.be-markdown-guide-modal .modal-header .close:hover,
#modalAjax:has(.be-markdown-guide) .modal-header .close:hover {
    opacity: 1 !important;
    color: #fff !important;
}

#modalAjax.be-markdown-guide-modal .modal-body.panel-body,
#modalAjax:has(.be-markdown-guide) .modal-body.panel-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.88) !important;
    padding: 22px 24px !important;
    max-height: min(70vh, 640px) !important;
    overflow-y: auto !important;
    text-align: left !important;
}

#modalAjax.be-markdown-guide-modal .modal-footer.panel-footer,
#modalAjax:has(.be-markdown-guide) .modal-footer.panel-footer {
    background: rgba(10, 7, 28, 0.96) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 14px 20px !important;
}

#modalAjax.be-markdown-guide-modal .modal-footer .btn-default,
#modalAjax:has(.be-markdown-guide) .modal-footer .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 8px 20px !important;
}

#modalAjax.be-markdown-guide-modal .modal-footer .btn-default:hover,
#modalAjax:has(.be-markdown-guide) .modal-footer .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
}

#modalAjax.be-markdown-guide-modal .modal-footer .btn-primary.modal-submit,
#modalAjax:has(.be-markdown-guide) .modal-footer .btn-primary.modal-submit {
    background: linear-gradient(135deg, #6d28d9, #a21caf) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

#modalAjax.be-markdown-guide-modal .modal-footer .loader,
#modalAjax:has(.be-markdown-guide) .modal-footer .loader {
    color: rgba(255, 255, 255, 0.55) !important;
}

#modalAjax .be-markdown-guide h4 {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 24px 0 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#modalAjax .be-markdown-guide h4:first-child {
    margin-top: 0 !important;
}

#modalAjax .be-markdown-guide pre {
    background: rgba(0, 0, 0, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    line-height: 1.52 !important;
    overflow-x: auto !important;
    margin: 0 0 10px !important;
    -webkit-font-smoothing: antialiased;
}

#modalAjax .be-markdown-guide pre em {
    color: rgba(244, 114, 212, 0.9) !important;
    font-style: italic !important;
}

#modalAjax .be-markdown-guide pre strong {
    color: #fff !important;
    font-weight: 600 !important;
}

#modalAjax.be-markdown-guide-modal .modal-body::-webkit-scrollbar,
#modalAjax:has(.be-markdown-guide) .modal-body::-webkit-scrollbar {
    width: 8px;
}

#modalAjax.be-markdown-guide-modal .modal-body::-webkit-scrollbar-thumb,
#modalAjax:has(.be-markdown-guide) .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* Kontakte: Fallback, falls #main-body nicht be-dashboard + be-client-account hat (z. B. nur Add-Contact-Ansicht) */
body.be-page-contacts #main-body .main-content {
    padding-top: 18px !important;
    padding-bottom: 48px !important;
}

body.be-page-contacts #main-body .header-lined {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    margin-top: 40px !important;
    margin-bottom: 4px !important;
    padding-top: 10px !important;
}

body.be-page-contacts #main-body .header-lined h1 {
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

body.be-page-contacts #main-body .header-lined h1 small,
body.be-page-contacts #main-body .header-lined .breadcrumb {
    color: rgba(255, 255, 255, 0.55) !important;
}

body.be-page-contacts #main-body .breadcrumb > li > a {
    color: rgba(244, 114, 212, 0.95) !important;
}

body.be-page-contacts #main-body .breadcrumb > .active {
    color: rgba(255, 255, 255, 0.45) !important;
}

body.be-page-contacts #main-body .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

body.be-page-contacts #main-body .alert.alert-info,
body.be-page-contacts #main-body .alert.alert-block.alert-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 24px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
}

body.be-page-contacts #main-body .alert.alert-info .control-label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 42px !important;
}

body.be-page-contacts #main-body .alert.alert-info select.form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
}

body.be-page-contacts #main-body .alert.alert-info select.form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

body.be-page-contacts #main-body .alert.alert-info .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-height: 42px !important;
    transition: all 0.2s ease !important;
}

body.be-page-contacts #main-body .alert.alert-info .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.be-page-contacts #main-body form.be-contacts-form {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 26px 24px 30px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flow-root !important;
    margin-bottom: 8px !important;
}

body.be-page-contacts #main-body form.be-contacts-form .form-group {
    margin-bottom: 18px !important;
}

body.be-page-contacts #main-body form.be-contacts-form .control-label,
body.be-page-contacts #main-body form.be-contacts-form label.control-label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
}

body.be-page-contacts #main-body form.be-contacts-form .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    min-height: 42px !important;
}

body.be-page-contacts #main-body form.be-contacts-form .form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

body.be-page-contacts #main-body form.be-contacts-form select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
}

body.be-page-contacts #main-body form.be-contacts-form .be-select select.form-control,
body.be-page-contacts #main-body form.be-contacts-form .be-select__native,
body.be-page-contacts #main-body .be-contacts-picker .be-select select.form-control,
body.be-page-contacts #main-body .be-contacts-picker .be-select__native {
    background-image: none !important;
    padding-right: 0 !important;
}

body.be-page-contacts #main-body form.be-contacts-form .be-select--open .be-select__trigger,
body.be-page-contacts #main-body form.be-contacts-form .be-select__trigger:focus,
body.be-page-contacts #main-body .be-contacts-picker .be-select--open .be-select__trigger,
body.be-page-contacts #main-body .be-contacts-picker .be-select__trigger:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

body.be-page-contacts #main-body form.be-contacts-form .be-select__trigger,
body.be-page-contacts #main-body .be-contacts-picker .be-select__trigger {
    min-height: 42px !important;
    height: auto !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.be-page-contacts #main-body form.be-contacts-form .checkbox label,
body.be-page-contacts #main-body form.be-contacts-form .controls.checkbox label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

body.be-page-contacts #main-body form.be-contacts-form .checkbox input[type="checkbox"],
body.be-page-contacts #main-body form.be-contacts-form .controls input[type="checkbox"] {
    accent-color: #8c45ff !important;
}

body.be-page-contacts #main-body form.be-contacts-form .well,
body.be-page-contacts #main-body #subacct-container {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    box-shadow: none !important;
    padding: 20px 22px !important;
    margin-top: 8px !important;
    margin-bottom: 22px !important;
}

body.be-page-contacts #main-body #subacct-container .full.control-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

body.be-page-contacts #main-body #subacct-container .btn-check-all {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    margin-top: 8px !important;
}

body.be-page-contacts #main-body #subacct-container .btn-check-all:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.be-page-contacts #main-body #subacct-container .generate-password {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}

body.be-page-contacts #main-body #subacct-container .generate-password:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.be-page-contacts #main-body form.be-contacts-form > .form-group > h3 {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 20px 0 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.be-page-contacts #main-body form.be-contacts-form > .form-group.text-center {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    margin-top: 28px !important;
    text-align: left !important;
}

body.be-page-contacts #main-body form.be-contacts-form .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: filter 0.2s ease !important;
}

body.be-page-contacts #main-body form.be-contacts-form .btn-primary:hover {
    filter: brightness(1.1) !important;
}

body.be-page-contacts #main-body form.be-contacts-form .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.be-page-contacts #main-body form.be-contacts-form .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

body.be-page-contacts #main-body form.be-contacts-form .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 22px !important;
    min-height: 44px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

body.be-page-contacts #main-body form.be-contacts-form .btn-danger:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    color: #fff !important;
}

body.be-page-contacts #main-body form.be-contacts-form .controls.checkbox {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

body.be-page-contacts #main-body form.be-contacts-form .controls.checkbox br {
    display: none !important;
}

body.be-page-contacts #main-body form.be-contacts-form .form-horizontal .control-label {
    color: rgba(255, 255, 255, 0.78) !important;
}

body.be-page-contacts #main-body form.be-contacts-form .form-horizontal .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

body.be-page-contacts #main-body .be-contacts-picker .form-horizontal .control-label {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    padding-top: 10px !important;
}

body.be-page-contacts #main-body .be-contacts-picker .form-horizontal .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

body.be-page-contacts #main-body .main-content > .alert.alert-success,
body.be-page-contacts #main-body .main-content > .alert.alert-danger,
body.be-page-contacts #main-body .main-content > .alert.alert-warning {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.be-page-contacts #main-body .main-content > .alert.alert-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body.be-page-contacts #main-body .main-content > .alert.alert-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body.be-page-contacts #main-body .main-content > .alert.alert-warning {
    background: rgba(234, 179, 8, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.be-page-contacts #main-body #subacct-container h3 {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-top: 16px !important;
}

/* Kontakte — Toolbar (ohne Bootstrap .alert), Seiten-Layout, Sektionen, Checkbox-Karten */
#main-body.be-dashboard-page.be-client-account-page .be-contacts-page,
body.be-page-contacts #main-body .be-contacts-page {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar.be-contacts-picker,
body.be-page-contacts #main-body .be-contacts-toolbar.be-contacts-picker {
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.14), rgba(200, 80, 192, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__inner,
body.be-page-contacts #main-body .be-contacts-toolbar__inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 14px 20px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__label,
body.be-page-contacts #main-body .be-contacts-toolbar__label {
    flex: 0 0 auto !important;
    min-width: 120px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 4px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__field,
body.be-page-contacts #main-body .be-contacts-toolbar__field {
    flex: 1 1 240px !important;
    min-width: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__field .form-control,
body.be-page-contacts #main-body .be-contacts-toolbar__field .form-control {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__field .form-control:focus,
body.be-page-contacts #main-body .be-contacts-toolbar__field .form-control:focus {
    border-color: rgba(244, 114, 212, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(244, 114, 212, 0.2) !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__action,
body.be-page-contacts #main-body .be-contacts-toolbar__action {
    flex: 0 0 auto !important;
    min-width: 112px !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__go.btn,
body.be-page-contacts #main-body .be-contacts-toolbar__go.btn {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    transition: filter 0.2s ease, transform 0.15s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page .be-contacts-toolbar__go.btn:hover,
body.be-page-contacts #main-body .be-contacts-toolbar__go.btn:hover {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-layout,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px 40px !important;
    margin-bottom: 4px !important;
}

@media (min-width: 992px) {
    #main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-layout,
    body.be-page-contacts #main-body form.be-contacts-form .be-contacts-layout {
        grid-template-columns: 1fr 1fr !important;
        align-items: start !important;
    }
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-col,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-col {
    min-width: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-section-title,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-section-title {
    margin: 0 0 18px !important;
    padding: 0 0 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(244, 114, 212, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: none !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-section-title--email,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-section-title--email {
    margin-top: 12px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-section--email,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-section--email {
    margin-top: 10px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-email-grid,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-email-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)) !important;
    gap: 12px 16px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-email-grid label,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-email-grid label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-email-grid label:hover,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-email-grid label:hover {
    border-color: rgba(244, 114, 212, 0.35) !important;
    background: rgba(140, 69, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-email-grid label span,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-email-grid label span {
    flex: 1 !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-actions,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .be-contacts-permissions-grid,
body.be-page-contacts #main-body #subacct-container .be-contacts-permissions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 10px 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .be-contacts-permissions-grid > .col-sm-6,
body.be-page-contacts #main-body #subacct-container .be-contacts-permissions-grid > .col-sm-6 {
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page #subacct-container .be-contacts-permissions-grid label,
body.be-page-contacts #main-body #subacct-container .be-contacts-permissions-grid label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-field-phone .intl-tel-input,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-field-phone .intl-tel-input {
    width: 100% !important;
    display: block !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-field-phone .intl-tel-input .form-control,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-field-phone .intl-tel-input input[type="tel"],
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-field-phone .intl-tel-input .form-control,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-field-phone .intl-tel-input input[type="tel"] {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-contacts-field-phone .intl-tel-input .selected-flag,
body.be-page-contacts #main-body form.be-contacts-form .be-contacts-field-phone .intl-tel-input .selected-flag {
    background: rgba(0, 0, 0, 0.35) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px 0 0 10px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-control::placeholder,
body.be-page-contacts #main-body form.be-contacts-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.38) !important;
}

/*
 * Kontakte — „Notfall“-Selektoren (Standard-WHMCS-Markup, fehlende Theme-Klassen, alte kompilierte Templates).
 * Erkennung über #inputContactId / #inputFirstName (nur Kontaktseiten).
 */
section#main-body:has(#inputContactId) {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 350px !important;
    background:
        radial-gradient(circle at 20% 20%, rgba(140, 69, 255, 0.12), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(180, 80, 255, 0.10), transparent 45%),
        #0b001a !important;
}

section#main-body:has(#inputContactId) .main-content {
    color: rgba(255, 255, 255, 0.88) !important;
    background: transparent !important;
}

section#main-body:has(#inputContactId) .header-lined {
    margin-top: 40px !important;
    margin-bottom: 4px !important;
    padding-top: 10px !important;
}

section#main-body:has(#inputContactId) .header-lined h1 {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

section#main-body:has(#inputContactId) .header-lined h1 small {
    color: rgba(255, 255, 255, 0.55) !important;
}

section#main-body:has(#inputContactId) .breadcrumb > li > a {
    color: rgba(244, 114, 212, 0.95) !important;
}

section#main-body:has(#inputContactId) .breadcrumb > .active {
    color: rgba(255, 255, 255, 0.45) !important;
}

section#main-body:has(#inputContactId) .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

section#main-body:has(#inputContactId) .alert.alert-info,
section#main-body:has(#inputContactId) .alert.alert-block.alert-info {
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.14), rgba(200, 80, 192, 0.08)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

section#main-body:has(#inputContactId) .alert.alert-info .control-label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
}

section#main-body:has(#inputContactId) .alert.alert-info select.form-control,
section#main-body:has(#inputContactId) .alert.alert-info .form-control {
    background: rgba(0, 0, 0, 0.28) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-radius: 12px !important;
    min-height: 44px !important;
    box-shadow: none !important;
}

section#main-body:has(#inputContactId) .alert.alert-info select.form-control:focus,
section#main-body:has(#inputContactId) .alert.alert-info .form-control:focus {
    border-color: rgba(244, 114, 212, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(244, 114, 212, 0.2) !important;
}

section#main-body:has(#inputContactId) .alert.alert-info .btn-default {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
}

section#main-body:has(#inputContactId) .alert.alert-info .btn-default:hover {
    filter: brightness(1.08) !important;
    color: #fff !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 26px 24px 30px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flow-root !important;
    margin-bottom: 8px !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .control-label,
section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) label.control-label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .form-control {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    box-shadow: none !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .form-control:focus {
    border-color: rgba(140, 69, 255, 0.55) !important;
    box-shadow: 0 0 0 2px rgba(140, 69, 255, 0.22) !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important;
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .checkbox label,
section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .controls.checkbox label {
    color: rgba(255, 255, 255, 0.82) !important;
    font-weight: 500 !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .checkbox input[type="checkbox"],
section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .controls input[type="checkbox"] {
    accent-color: #8c45ff !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .btn-primary {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .btn-primary:hover {
    filter: brightness(1.1) !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .btn-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    padding: 10px 22px !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .btn-default:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .btn-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-height: 44px !important;
}

section#main-body:has(#inputFirstName) form[role="form"][method="post"]:not(.be-contacts-picker-form) .form-group > h3 {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 20px 0 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

section#main-body:has(#inputFirstName) #subacct-container.well {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    box-shadow: none !important;
}

section#main-body:has(#inputFirstName) .intl-tel-input {
    width: 100% !important;
}

section#main-body:has(#inputFirstName) .intl-tel-input .form-control,
section#main-body:has(#inputFirstName) .intl-tel-input input[type="tel"] {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

section#main-body:has(#inputFirstName) .intl-tel-input .selected-flag {
    background: rgba(0, 0, 0, 0.35) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Account-Sidebar (Client Area): Glass-Karte, Verlauf-Header, aktiver Eintrag — hohe Spezifität */
#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar {
    background: rgba(18, 12, 40, 0.52) !important;
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38) !important;
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar > .panel-heading,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar > .panel-heading,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar > .panel-heading {
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.55), rgba(88, 28, 135, 0.55)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar .panel-title,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar .panel-title,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar .panel-title {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar .panel-heading .panel-minimise,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar .panel-heading .panel-minimise,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar .panel-heading .panel-minimise {
    color: rgba(255, 255, 255, 0.55) !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar .list-group,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar .list-group,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar .list-group {
    background: rgba(0, 0, 0, 0.18) !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar .list-group-item,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar .list-group-item,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar a.list-group-item:hover,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar a.list-group-item:hover,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar a.list-group-item:hover {
    background: rgba(140, 69, 255, 0.18) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar a.list-group-item.active,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar a.list-group-item.active,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar a.list-group-item.active {
    background: linear-gradient(90deg, rgba(140, 69, 255, 0.38), rgba(200, 80, 192, 0.14)) !important;
    border-left: 3px solid rgba(244, 114, 212, 0.95) !important;
    padding-left: 11px !important;
    color: #fff !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar a.list-group-item .sidebar-menu-item-icon,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar a.list-group-item .sidebar-menu-item-icon,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar a.list-group-item .sidebar-menu-item-icon {
    color: rgba(255, 255, 255, 0.5) !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar a.list-group-item.active .sidebar-menu-item-icon,
#main-body.be-dashboard-page.be-client-account-page .sidebar .panel.panel-sidebar a.list-group-item:hover .sidebar-menu-item-icon,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar a.list-group-item.active .sidebar-menu-item-icon,
body.be-page-contacts #main-body .sidebar .panel.panel-sidebar a.list-group-item:hover .sidebar-menu-item-icon,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar a.list-group-item.active .sidebar-menu-item-icon,
section#main-body:has(#inputContactId) .sidebar .panel.panel-sidebar a.list-group-item:hover .sidebar-menu-item-icon {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Mobile: zweites Panel mit Select (sidebar.tpl) */
#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-lg,
#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-md,
body.be-page-contacts #main-body .sidebar > .panel.hidden-lg,
body.be-page-contacts #main-body .sidebar > .panel.hidden-md,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-lg,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-md {
    background: rgba(18, 12, 40, 0.52) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-lg > .panel-heading,
#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-md > .panel-heading,
body.be-page-contacts #main-body .sidebar > .panel.hidden-lg > .panel-heading,
body.be-page-contacts #main-body .sidebar > .panel.hidden-md > .panel-heading,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-lg > .panel-heading,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-md > .panel-heading {
    background: linear-gradient(135deg, rgba(140, 69, 255, 0.55), rgba(88, 28, 135, 0.55)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-lg .panel-body,
#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-md .panel-body,
body.be-page-contacts #main-body .sidebar > .panel.hidden-lg .panel-body,
body.be-page-contacts #main-body .sidebar > .panel.hidden-md .panel-body,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-lg .panel-body,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-md .panel-body {
    background: rgba(0, 0, 0, 0.15) !important;
}

#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-lg .form-control,
#main-body.be-dashboard-page.be-client-account-page .sidebar > .panel.hidden-md .form-control,
body.be-page-contacts #main-body .sidebar > .panel.hidden-lg .form-control,
body.be-page-contacts #main-body .sidebar > .panel.hidden-md .form-control,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-lg .form-control,
section#main-body:has(#inputContactId) .sidebar > .panel.hidden-md .form-control {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border-radius: 12px !important;
    min-height: 44px !important;
}

/* Kontakte / Meine Daten / Kontakt-Picker: Glass-Dropdown-Trigger & Panel */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__trigger,
body.be-page-contacts #main-body form.be-contacts-form .be-select__trigger,
body.be-page-contacts #main-body .be-contacts-picker .be-select__trigger,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__trigger,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__trigger {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 46px 0 16px !important;
    border-radius: 14px !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(12, 8, 28, 0.92) 100%) !important;
    border: 1px solid rgba(140, 69, 255, 0.45) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 10px 28px rgba(0, 0, 0, 0.35) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__trigger:hover,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__trigger:hover,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__trigger:hover,
body.be-page-contacts #main-body form.be-contacts-form .be-select__trigger:hover,
body.be-page-contacts #main-body .be-contacts-picker .be-select__trigger:hover,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__trigger:hover,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__trigger:hover {
    border-color: rgba(200, 130, 255, 0.65) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.09) inset,
        0 0 0 1px rgba(244, 114, 212, 0.2),
        0 12px 32px rgba(88, 28, 135, 0.35) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select--open .be-select__trigger,
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__trigger:focus,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__trigger:focus,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__trigger:focus,
body.be-page-contacts #main-body form.be-contacts-form .be-select--open .be-select__trigger,
body.be-page-contacts #main-body .be-contacts-picker .be-select--open .be-select__trigger,
body.be-page-contacts #main-body form.be-contacts-form .be-select__trigger:focus,
body.be-page-contacts #main-body .be-contacts-picker .be-select__trigger:focus,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select--open .be-select__trigger,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select--open .be-select__trigger,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__trigger:focus,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__trigger:focus {
    border-color: rgba(244, 114, 212, 0.75) !important;
    box-shadow:
        0 0 0 2px rgba(140, 69, 255, 0.35),
        0 14px 36px rgba(0, 0, 0, 0.45) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__trigger::after,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__trigger::after,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__trigger::after,
body.be-page-contacts #main-body form.be-contacts-form .be-select__trigger::after,
body.be-page-contacts #main-body .be-contacts-picker .be-select__trigger::after,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__trigger::after,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__trigger::after {
    content: "" !important;
    position: absolute !important;
    right: 17px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: -6px !important;
    border: none !important;
    border-right: 2px solid rgba(244, 114, 212, 0.9) !important;
    border-bottom: 2px solid rgba(244, 114, 212, 0.9) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease, margin-top 0.2s ease !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select--open .be-select__trigger::after,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select--open .be-select__trigger::after,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select--open .be-select__trigger::after,
body.be-page-contacts #main-body form.be-contacts-form .be-select--open .be-select__trigger::after,
body.be-page-contacts #main-body .be-contacts-picker .be-select--open .be-select__trigger::after,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select--open .be-select__trigger::after,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select--open .be-select__trigger::after {
    transform: rotate(-135deg) !important;
    margin-top: -2px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__panel,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__panel,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__panel,
body.be-page-contacts #main-body form.be-contacts-form .be-select__panel,
body.be-page-contacts #main-body .be-contacts-picker .be-select__panel,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__panel,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__panel {
    padding: 8px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(32, 22, 58, 0.98), rgba(14, 10, 32, 0.99)) !important;
    border: 1px solid rgba(140, 69, 255, 0.4) !important;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.07) inset,
        0 -1px 0 rgba(244, 114, 212, 0.12) inset !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__option,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__option,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__option,
body.be-page-contacts #main-body form.be-contacts-form .be-select__option,
body.be-page-contacts #main-body .be-contacts-picker .be-select__option,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__option,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__option {
    padding: 11px 14px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .be-select__option.is-selected,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .be-select__option.is-selected,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .be-select__option.is-selected,
body.be-page-contacts #main-body form.be-contacts-form .be-select__option.is-selected,
body.be-page-contacts #main-body .be-contacts-picker .be-select__option.is-selected,
section#main-body:has(#inputContactId) form.be-contacts-form .be-select__option.is-selected,
section#main-body:has(#inputContactId) .be-contacts-picker .be-select__option.is-selected {
    background: linear-gradient(90deg, rgba(140, 69, 255, 0.35), rgba(200, 80, 192, 0.15)) !important;
    box-shadow: inset 3px 0 0 rgba(244, 114, 212, 0.9) !important;
}

section#main-body:has(#inputFirstName) form[role="form"]:not(.be-contacts-picker-form) select.form-control:not(.be-select__native) {
    min-height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(12, 8, 28, 0.88)) !important;
    border: 1px solid rgba(140, 69, 255, 0.45) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
    padding-right: 40px !important;
}

section#main-body:has(#inputFirstName) form[role="form"]:not(.be-contacts-picker-form) select.form-control:not(.be-select__native):focus {
    border-color: rgba(244, 114, 212, 0.75) !important;
    box-shadow:
        0 0 0 2px rgba(140, 69, 255, 0.35),
        0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form select.form-control:not(.be-select__native),
body.be-page-contacts #main-body form.be-contacts-form select.form-control:not(.be-select__native) {
    min-height: 48px !important;
    border-radius: 14px !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(12, 8, 28, 0.88)) !important;
    border: 1px solid rgba(140, 69, 255, 0.45) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
    padding-right: 40px !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form select.form-control:not(.be-select__native):focus,
body.be-page-contacts #main-body form.be-contacts-form select.form-control:not(.be-select__native):focus {
    border-color: rgba(244, 114, 212, 0.75) !important;
    box-shadow:
        0 0 0 2px rgba(140, 69, 255, 0.35),
        0 10px 28px rgba(0, 0, 0, 0.35) !important;
}

/*
 * intl-tel-input Telefon-Länderliste: WHMCS hängt sie per dropdownContainer an <body> (.iti-container),
 * daher greifen Selektoren mit #main-body nicht. Hier globale Overrides (nach all.css).
 */
.intl-tel-input.iti-container {
    position: absolute !important;
    z-index: 10090 !important;
}

.intl-tel-input .country-list {
    box-sizing: border-box !important;
    list-style: none !important;
    background: rgba(22, 18, 45, 0.98) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(140, 69, 255, 0.45) !important;
    border-radius: 14px !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
    max-height: min(320px, 55vh) !important;
    min-width: min(100vw - 24px, 300px) !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.06);
}

.intl-tel-input .country-list::-webkit-scrollbar {
    width: 8px;
}

.intl-tel-input .country-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.intl-tel-input .country-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.intl-tel-input .country-list .country {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    cursor: pointer;
    transition: background 0.12s ease;
}

.intl-tel-input .country-list .country .country-name {
    color: rgba(255, 255, 255, 0.94) !important;
}

.intl-tel-input .country-list .country .dial-code {
    color: rgba(255, 255, 255, 0.42) !important;
}

.intl-tel-input .country-list .country.highlight {
    background: rgba(123, 47, 247, 0.38) !important;
}

.intl-tel-input .country-list .country.highlight .dial-code {
    color: rgba(255, 255, 255, 0.75) !important;
}

.intl-tel-input .country-list .country.active {
    background: rgba(244, 114, 212, 0.18) !important;
}

.intl-tel-input .country-list .divider {
    padding: 0 !important;
    margin: 8px 12px !important;
    height: 0 !important;
    min-height: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: transparent !important;
    pointer-events: none;
    list-style: none !important;
}

/* intl-tel-input neuere BEM-Klassen (iti__*) — gleiche Optik wie .country-list */
.iti--container {
    z-index: 10090 !important;
}

.iti__country-list {
    box-sizing: border-box !important;
    list-style: none !important;
    background: rgba(22, 18, 45, 0.98) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(140, 69, 255, 0.45) !important;
    border-radius: 14px !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
    max-height: min(320px, 55vh) !important;
    min-width: min(100vw - 24px, 300px) !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.06);
}

.iti__country-list::-webkit-scrollbar {
    width: 8px;
}

.iti__country-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.iti__country {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    cursor: pointer;
    transition: background 0.12s ease;
}

.iti__country-name {
    color: rgba(255, 255, 255, 0.94) !important;
}

.iti__dial-code {
    color: rgba(255, 255, 255, 0.42) !important;
}

.iti__country.iti__highlight,
.iti__country:hover {
    background: rgba(123, 47, 247, 0.38) !important;
}

.iti__country.iti__highlight .iti__dial-code {
    color: rgba(255, 255, 255, 0.75) !important;
}

.iti__country.iti__active {
    background: rgba(244, 114, 212, 0.18) !important;
}

.iti__divider {
    padding: 0 !important;
    margin: 8px 12px !important;
    height: 0 !important;
    min-height: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: transparent !important;
    pointer-events: none;
    list-style: none !important;
}

@media (max-width: 500px) {
    .intl-tel-input .country-list {
        white-space: normal !important;
    }

    .iti__country-list {
        white-space: normal !important;
    }
}

/* Formulare: Dropdown-Panels (Custom-Select + intl-tel) nicht abschneiden */
#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form,
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker,
body.be-page-contacts #main-body form.be-contacts-form,
body.be-page-contacts #main-body .be-contacts-picker,
section#main-body:has(#inputContactId) form.be-contacts-form,
section#main-body:has(#inputFirstName) form.be-contacts-form {
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-group:has(.be-select),
#main-body.be-dashboard-page.be-client-account-page .be-contacts-picker .form-group:has(.be-select),
body.be-page-contacts #main-body form.be-contacts-form .form-group:has(.be-select),
section#main-body:has(#inputContactId) form.be-contacts-form .form-group:has(.be-select),
section#main-body:has(#inputFirstName) form.be-contacts-form .form-group:has(.be-select) {
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-contacts-form .form-group:has(.intl-tel-input),
body.be-page-contacts #main-body form.be-contacts-form .form-group:has(.intl-tel-input),
section#main-body:has(#inputContactId) form.be-contacts-form .form-group:has(.intl-tel-input),
section#main-body:has(#inputFirstName) form.be-contacts-form .form-group:has(.intl-tel-input) {
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form,
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .form-group:has(.be-select),
#main-body.be-dashboard-page.be-client-account-page form.be-client-account-form .form-group:has(.intl-tel-input) {
    overflow: visible !important;
}

.register-wrapper form[role="form"],
.register-wrapper .form-group:has(.be-select),
.register-wrapper .form-group:has(.intl-tel-input) {
    overflow: visible !important;
}

/*
 * Custom Select — Glass (Panel an <body> portaliert, position:fixed per JS)
 */
.be-select {
    position: relative;
    width: 100%;
}

.be-select__trigger {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 44px 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #fff !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
    border-radius: 14px !important;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.09), rgba(12, 8, 28, 0.92)) !important;
    border: 1.5px solid rgba(140, 69, 255, 0.45) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    position: relative !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.be-select__trigger::after {
    content: "" !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: -6px !important;
    border: 0 !important;
    border-right: 2px solid rgba(244, 114, 212, 0.85) !important;
    border-bottom: 2px solid rgba(244, 114, 212, 0.85) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s, margin-top 0.2s !important;
    pointer-events: none !important;
}

.be-select--open .be-select__trigger::after {
    transform: rotate(-135deg) !important;
    margin-top: -2px !important;
}

.be-select__trigger:hover {
    border-color: rgba(200, 130, 255, 0.7) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 0 0 1px rgba(244, 114, 212, 0.18),
        0 12px 32px rgba(88, 28, 135, 0.35) !important;
}

.be-select__trigger:focus,
.be-select--open .be-select__trigger {
    outline: none !important;
    border-color: rgba(244, 114, 212, 0.75) !important;
    box-shadow:
        0 0 0 2.5px rgba(140, 69, 255, 0.35),
        0 14px 36px rgba(0, 0, 0, 0.45) !important;
}

.be-select__panel {
    box-sizing: border-box !important;
    border-radius: 16px !important;
    padding: 8px !important;
    background: linear-gradient(165deg, rgba(38, 26, 72, 0.98), rgba(8, 4, 22, 0.99)) !important;
    border: 1.5px solid rgba(160, 90, 255, 0.5) !important;
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 52px rgba(140, 69, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
    overflow: hidden !important;
}

.be-select__list {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.05);
}

.be-select__list::-webkit-scrollbar {
    width: 6px;
}

.be-select__list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}

.be-select__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

.be-select__option {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    margin: 2px 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    line-height: 1.35 !important;
    transition: background 0.12s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.be-select__option:hover,
.be-select__option:focus {
    background: rgba(123, 47, 247, 0.4) !important;
    color: #fff !important;
    outline: none !important;
}

.be-select__option.is-selected {
    background: linear-gradient(90deg, rgba(140, 69, 255, 0.45), rgba(244, 114, 212, 0.18)) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 rgba(244, 114, 212, 0.95) !important;
}

/* Natives <select> nach JS-Enhancement vollständig verstecken */
select.be-select__native,
select.be-select__native.form-control,
select.be-select__native.custom-select,
.be-select select.be-select__native,
#main-body select.be-select__native,
body select.be-select__native {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* =========================================================
   Produktdetails (clientareaproductdetails) — Modul-Overview
   Eure bestehenden :has(.product-details)-Regeln greifen nicht,
   wenn nur $tplOverviewTabOutput ausgegeben wird. Dieser Block
   spiegelt das Dashboard-Glas + Zwei-Spalten-Stretch schlicht.
   ========================================================= */
#main-body.be-dashboard-page.be-product-details-page .main-content {
    padding-top: 16px !important;
    padding-bottom: 42px !important;
}

#main-body.be-dashboard-page.be-product-details-page .tab-content.margin-bottom {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .nav-tabs-overflow {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    margin-top: 18px !important;
}

#main-body.be-dashboard-page.be-product-details-page .nav-tabs-overflow > li > a {
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-product-details-page .nav-tabs-overflow > li.active > a,
#main-body.be-dashboard-page.be-product-details-page .nav-tabs-overflow > li.active > a:focus,
#main-body.be-dashboard-page.be-product-details-page .nav-tabs-overflow > li.active > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 -2px 0 #d26dff !important;
}

#main-body.be-dashboard-page.be-product-details-page .product-details-tab-container {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
    padding: 16px 14px !important;
}

#main-body.be-dashboard-page.be-product-details-page .product-details-tab-container .tab-pane .row {
    padding: 10px 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#main-body.be-dashboard-page.be-product-details-page .product-details-tab-container .tab-pane .row:last-child {
    border-bottom: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: auto;
    color: rgba(255, 255, 255, 0.92) !important;
    background: transparent !important;
}

#main-body.be-dashboard-page.be-product-details-page #tabOverview {
    background: transparent !important;
}

/* Harte Weiß-Flächen aus Modul/Bootstrap entfernen (inkl. typischer Inline-Styles) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .bg-white,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .bg-light {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#fff"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#ffffff"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="255, 255, 255"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="255,255,255"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="background: white"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="background:white"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="background-color: white"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="background-color:white"] {
    background-color: rgba(36, 30, 72, 0.85) !important;
    background-image: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel-footer {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .list-group,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .list-group-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .thumbnail {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group-addon {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .table-striped > tbody > tr:nth-of-type(odd) > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .table-hover > tbody > tr:hover > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .table-hover > tbody > tr:hover > th {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area pre,
#main-body.be-dashboard-page.be-product-details-page .module-client-area code {
    background: rgba(14, 10, 40, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel-default,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .well,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel-title,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel-heading h4,
#main-body.be-dashboard-page.be-product-details-page .module-client-area h4 {
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area h4.text-success,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .text-success.panel-title {
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area table,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .table {
    width: 100% !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .table > tbody > tr > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .table > thead > tr > th,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .table > tbody > tr > th {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: transparent !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .form-control,
#main-body.be-dashboard-page.be-product-details-page .module-client-area input,
#main-body.be-dashboard-page.be-product-details-page .module-client-area select,
#main-body.be-dashboard-page.be-product-details-page .module-client-area textarea {
    background: rgba(14, 10, 40, 0.55) !important;
    border: 1px solid rgba(175, 126, 255, 0.35) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .form-control:focus {
    border-color: rgba(210, 109, 255, 0.75) !important;
    box-shadow: 0 0 0 3px rgba(140, 69, 255, 0.22) !important;
    outline: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-default,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-info {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-primary,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-success {
    background: linear-gradient(135deg, #8c45ff, #c850c0) !important;
    border: none !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-danger {
    background: linear-gradient(135deg, #ff4b8b, #ff6a88) !important;
    border: none !important;
    color: #fff !important;
}

/* Passwort-/Copy-Zeilen: komplette .input-group dunkel (nicht nur das Feld) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
    background: rgba(14, 10, 40, 0.75) !important;
    border: 1px solid rgba(175, 126, 255, 0.38) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.48) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group-addon,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group-text {
    background: rgba(255, 255, 255, 0.07) !important;
    border: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group-addon:last-child,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .input-group-text:last-child {
    border-right: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area input[readonly],
#main-body.be-dashboard-page.be-product-details-page .module-client-area input[disabled],
#main-body.be-dashboard-page.be-product-details-page .module-client-area textarea[readonly],
#main-body.be-dashboard-page.be-product-details-page .module-client-area textarea[disabled],
#main-body.be-dashboard-page.be-product-details-page .module-client-area select[disabled] {
    background-color: rgba(14, 10, 40, 0.5) !important;
    color: rgba(255, 255, 255, 0.94) !important;
    opacity: 1 !important;
}

/* Alle Modul-Tabellen: Zeilen dunkel (auch ohne .table-striped / mit Inline-Weiß auf Zellen) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area table tbody tr:nth-child(odd) > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area table tbody tr:nth-child(odd) > th {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area table tbody tr:nth-child(even) > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area table tbody tr:nth-child(even) > th {
    background-color: rgba(255, 255, 255, 0.085) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area table thead tr > th,
#main-body.be-dashboard-page.be-product-details-page .module-client-area table thead tr > td {
    background-color: rgba(255, 255, 255, 0.09) !important;
}

/* Typische „fast weiß“ Inline-Hintergründe aus Modul-CSS */
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#f5f5f5"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#F5F5F5"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#f8f9fa"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#fafafa"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#eeeeee"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="e9ecef"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#e9ecef"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#fdfdfd"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#fcfcfc"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#f3f3f3"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#f0f0f0"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#efefef"],
#main-body.be-dashboard-page.be-product-details-page .module-client-area [style*="#e8e8e8"] {
    background-color: rgba(32, 26, 68, 0.88) !important;
    background-image: none !important;
}

/* Bootstrap 4/5: Karten, sekundäre Buttons */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .card .card-header,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .card .card-footer {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .card .card-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-light,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .btn-secondary {
    background: rgba(255, 255, 255, 0.11) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .jumbotron {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Lesetexte: kein Hellblau auf hellem Grund */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .text-primary {
    color: #c8d7ff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .text-info {
    color: #b8e9ff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area label,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .control-label {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Quick-Actions / Modul-Kacheln (oft zentrierte Links in Spalten) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .row .text-center > a:not(.btn-primary):not(.btn-success):not(.btn-danger) {
    display: inline-block !important;
    min-width: 5rem !important;
    padding: 12px 10px !important;
    margin-bottom: 8px !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    color: #fff !important;
    text-decoration: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .row .text-center > a:not(.btn-primary):not(.btn-success):not(.btn-danger):hover,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .row .text-center > a:not(.btn-primary):not(.btn-success):not(.btn-danger):focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(194, 126, 255, 0.45) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area [class*="quick"] a,
#main-body.be-dashboard-page.be-product-details-page .module-client-area [class*="action"] > a,
#main-body.be-dashboard-page.be-product-details-page .module-client-area [class*="Action"] a {
    background: rgba(255, 255, 255, 0.09) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .alert-info {
    background: rgba(43, 124, 255, 0.16) !important;
    border-color: rgba(120, 180, 255, 0.38) !important;
    color: #eaf2ff !important;
}

@media (min-width: 992px) {
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
    }

    /* #hcrpassword ausnehmen: Hetzner blendet Rescue-Passwort per inline display:none / jQuery .hide() aus.
       display:flex !important würde sonst das Verstecken überschreiben → immer zwei Felder sichtbar. */
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row > [class*="col-"]:not(#hcrpassword) {
        float: none !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row > [class*="col-"]:not(#hcrpassword) > .panel,
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row > [class*="col-"]:not(#hcrpassword) > .well,
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row > [class*="col-"]:not(#hcrpassword) > .card {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }

    /* Optionaler Wrapper zwischen Spalte und .panel (häufig bei Modul-Templates) */
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row > [class*="col-"]:not(#hcrpassword) > div:has(> .panel) {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area .row > [class*="col-"]:not(#hcrpassword) > div:has(> .panel) > .panel {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area iframe,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .leaflet-container,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .gm-style {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area iframe {
    filter: brightness(0.88) saturate(0.92) !important;
}

/* =========================================================
   Produktdetails — Abschluss (Spezifität + Modul-„Rest-Weiß“)
   Viele Server-Module liefern eigenes Markup/CSS; diese Regeln
   kommen nach theme/all.css und zielen auf typische Muster.
   ========================================================= */
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .table-responsive {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 12px !important;
    overflow-x: auto !important;
}

section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-default > .panel-heading,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-default > .panel-body,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-default > .panel-footer {
    background-color: transparent !important;
    background-image: none !important;
}

/* Direkter Block unter .panel-body ohne .row (reiner Wrapper mit hellem BG) */
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body > div:not(.row):not(.table-responsive) {
    background-color: rgba(22, 18, 52, 0.75) !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body > .row {
    background: transparent !important;
    background-image: none !important;
}

/* Breite Infospalte (Tabelle) neben Karte — häufig col-8/9; Stat-Kacheln meist col-3 → unangetastet */
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row > [class*="col-md-8"] > div:not(.panel):not(.row):not([class*="bg-info"]):not([class*="bg-primary"]):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]),
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row > [class*="col-md-9"] > div:not(.panel):not(.row):not([class*="bg-info"]):not([class*="bg-primary"]):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]),
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row > [class*="col-lg-8"] > div:not(.panel):not(.row):not([class*="bg-info"]):not([class*="bg-primary"]):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]),
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row > [class*="col-sm-8"] > div:not(.panel):not(.row):not([class*="bg-info"]):not([class*="bg-primary"]):not([class*="bg-success"]):not([class*="bg-danger"]):not([class*="bg-warning"]) {
    background-color: rgba(22, 18, 52, 0.78) !important;
    background-image: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
    border-radius: 12px !important;
}

section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body td,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body th,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .table td,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .table th {
    color: rgba(255, 255, 255, 0.93) !important;
}

/* Oberste Modul-Zeilen (Produkt vs. Bandwidth): gleiche Höhe, falls .dial-usage vorhanden */
@media (min-width: 992px) {
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .row:has(.dial-usage) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }

    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .row:has(.dial-usage) > [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
    }

    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .row:has(.dial-usage) > [class*="col-"] > * {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
    }
}

/* Hetzner #resourceusage — gesamte Bandwidth-Karte (Feld im Overview): professionell, eine klare Glasfläche */
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage {
    margin-bottom: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage > .overflow-hidden.card.footer-bg-sm.panel-danger.panel,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage > .overflow-hidden.card.footer-bg-sm.panel-danger.panel {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius:       14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important;
    overflow: hidden !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .bg-holder,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .bg-holder {
    display: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-heading.card-header,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-heading.card-header {
    padding: 1rem 1.25rem !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-heading .pull-left,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-heading .float-left,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-heading .pull-left,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-heading .float-left {
    float: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-title,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .card-title,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-title,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .card-title {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-title::before,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .card-title::before,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-title::before,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .card-title::before {
    content: none !important;
    display: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-body.card-body,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-body.card-body {
    padding: 1rem 1.25rem 1.125rem !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Nur der Messbereich (zwei Säulen): zentriert, gleiche Raster, ohne br-Lücken */
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-body > .row.text-center:first-of-type,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-body > .row.text-center:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1rem 1.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.35rem 0.25rem 0.65rem !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #diskUsage,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #bandwidthUsage,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #diskUsage,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #bandwidthUsage {
    flex: 1 1 240px !important;
    max-width: min(300px, 100%) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0.85rem 0.75rem 1rem !important;
    /* row + wrap: Titel & Dial je volle Zeile; Zahl + „ MB / …“ in einer gemeinsamen Zeile (nicht zwei Flex-Items untereinander) */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: flex-start !important;
    row-gap: 0.5rem !important;
    column-gap: 0 !important;
    text-align: center !important;
    line-height: 1.45 !important;
    font-size: 0.75rem !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum", "kern" !important;
    color: rgba(215, 212, 240, 0.94) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #diskUsage br,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #bandwidthUsage br,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #diskUsage br,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #bandwidthUsage br {
    display: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #diskUsage strong,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #bandwidthUsage strong,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #diskUsage strong,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #bandwidthUsage strong {
    flex: 1 1 100% !important;
    width: 100% !important;
    font-size: 0.65625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(195, 190, 232, 0.95) !important;
    margin: 0 !important;
}

/* Knob-Wrapper: relativ, damit absolut positioniertes Input nicht über die Statistikzeile „läuft“ */
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #diskUsage > div,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #bandwidthUsage > div,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #diskUsage > div,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #bandwidthUsage > div {
    position: relative !important;
    z-index: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 0 0.2rem !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ziffer + „ MB / …“: saubere Rasterung, kein Schlagschatten, klarer Abstand vor „MB“ */
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #diskUsage span#outgoing_traffic,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #diskUsage span#outgoing_traffic {
    position: relative !important;
    z-index: 1 !important;
    display: inline !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 0.22em 0 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .limit-near,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .text-info.limit-near,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .limit-near,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .text-info.limit-near {
    float: none !important;
    width: 100% !important;
    margin: 0.5rem 0 0 !important;
    padding: 0.6rem 1rem !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 10px !important;
    font-size: 0.78125rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    color: rgba(238, 240, 255, 0.92) !important;
    text-align: center !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .text-info.limit-near,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .text-info.limit-near {
    color: rgba(220, 228, 255, 0.94) !important;
}

@media (max-width: 575px) {
    #main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage .panel-body > .row.text-center:first-of-type,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage .panel-body > .row.text-center:first-of-type {
        flex-direction: column !important;
        gap: 1.15rem !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #diskUsage,
    #main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage #bandwidthUsage,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #diskUsage,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage #bandwidthUsage {
        max-width: none !important;
    }
}

/*
 * Knob-Zentraleingabe: jQuery Knob setzt margin per Inline-Style zur Zentrierung.
 * Theme-Regeln können das stören → Ziffer sitzt am Bogenanfang. Neu: absolut in die
 * Mitte des 100×80-Canvas (Halbkreis), Inline-Margins neutralisieren.
 */
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage input.usage-dial,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage input.usage-dial {
    position: absolute !important;
    left: 50% !important;
    top: 47% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 2.85rem !important;
    max-width: 46% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum", "kern" !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: geometricPrecision !important;
    caret-color: rgba(255, 255, 255, 0.8) !important;
    pointer-events: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage input.usage-dial:focus,
#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage input.usage-dial:focus-visible,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage input.usage-dial:focus,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage input.usage-dial:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    left: 50% !important;
    top: 47% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area #resourceusage input.usage-dial::selection,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area #resourceusage input.usage-dial::selection {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Karte neben Tabelle: Flex-Zeile, damit nichts übereinander „schwebt“ */
@media (min-width: 992px) {
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(.leaflet-container),
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(.gm-style),
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(iframe[src*="google.com/maps"]),
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(iframe[src*="maps.google"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(.leaflet-container) > [class*="col-"],
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(.gm-style) > [class*="col-"],
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(iframe[src*="google.com/maps"]) > [class*="col-"],
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel-body .row:has(iframe[src*="maps.google"]) > [class*="col-"] {
        position: relative !important;
        max-width: 100% !important;
    }
}

/* Reine <button> in Modulgrids (ohne .btn-Klasse) */
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area button:not([class*="btn-"]):not(.close) {
    background: rgba(255, 255, 255, 0.11) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    border-radius: 10px !important;
}

/* =========================================================
   Hetzner Cloud Modul — „Server Quick Actions“ (actions.tpl)
   Doppel-Kasten: .panel + innere .card + .bg-holder + footer.png
   Kacheln: .action-btn ist in module CSS #fff — hier Dark-Glass.
   ========================================================= */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid),
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-danger:has(.button-grid) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) > .overflow-hidden.card.footer-bg,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-danger:has(.button-grid) > .card.footer-bg {
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .bg-holder {
    display: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .panel-heading.card-header,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .card-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 16px 18px !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .card-title,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .panel-title {
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .card-block.table-border-style {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .panel-body.card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 18px 16px 22px !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .button-grid {
    gap: 14px 16px !important;
    justify-content: flex-start !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .action-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .action-btn span {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .action-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(194, 126, 255, 0.45) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(-3px) scale(1.03) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-danger:has(.button-grid) .action-btn:active {
    transform: scale(0.97) !important;
}

/* Hetzner Cloud — Übersichtskarten (Cores / Disk / Traffic / Memory): Zeile zentrieren */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .row:has(> .dashboardwmnpl),
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .row:has(> .dashboardwmnpl) {
    display: flex !important;
    justify-content: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .dashboardwmnpl,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .dashboardwmnpl {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    max-width: min(1200px, 100%) !important;
    width: 100% !important;
    flex: 0 1 1200px !important;
}

/* Hetzner overview.tpl — Billing: inneren Mini-Kasten nur per CSS neutralisieren (Markup bleibt Original) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 > .overflow-hidden.card.footer-bg-sm,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 > .card.footer-bg-sm,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 > .overflow-hidden.card.footer-bg-sm,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 > .card.footer-bg-sm {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .bg-holder,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .bg-holder {
    display: none !important;
}

/* Billing Overview — professionelle Leseliste: Label links, Wert rechts, klare Hierarchie (nur CSS) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-heading.card-header,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-heading.card-header {
    padding: 1rem 1.25rem 0.875rem !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-title,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .card-title,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-title,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .card-title {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body.card-body,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body.card-body {
    padding: 0.25rem 1.25rem 1.125rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row:last-child,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row:last-child {
    border-bottom: none !important;
    padding-bottom: 0.25rem !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > .col-sm-5,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > [class*="col-sm-5"],
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > .col-sm-5,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > [class*="col-sm-5"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > .col-sm-6,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > [class*="col-sm-6"],
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > .col-sm-6,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > [class*="col-sm-6"] {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum", "kern" !important;
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: nowrap !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body strong,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body strong {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.025em !important;
    color: rgba(205, 200, 238, 0.9) !important;
}

@media (max-width: 575px) {
    #main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row {
        flex-wrap: wrap !important;
        gap: 4px 0 !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > .col-sm-6,
    #main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > [class*="col-sm-6"],
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > .col-sm-6,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-info.mb-3 .panel-body .row > [class*="col-sm-6"] {
        flex: 1 1 100% !important;
        text-align: left !important;
        white-space: normal !important;
    }
}

/* Hetzner overview.tpl — Configurable Options: inneren Mini-Kasten nur per CSS weg, äußeres panel-success unverändert sichtbar */
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success > .overflow-hidden.card.footer-bg-sm,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success > .card.footer-bg-sm,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success > .overflow-hidden.card.footer-bg-sm,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success > .card.footer-bg-sm {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .bg-holder,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .bg-holder {
    display: none !important;
}

/* Configurable Options — gleiche Leseliste wie Billing (Label links, Wert rechts) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-heading.card-header,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-heading.card-header {
    padding: 1rem 1.25rem 0.875rem !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-title,
#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .card-title,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-title,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .card-title {
    margin: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.98) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body.card-body,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body.card-body {
    padding: 0.25rem 1.25rem 1.125rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.6rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row:last-child,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row:last-child {
    border-bottom: none !important;
    padding-bottom: 0.25rem !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row > div:first-child,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row > div:last-child,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row > div:last-child {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    text-align: right !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum", "kern" !important;
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: normal !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body strong,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body strong {
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.025em !important;
    color: rgba(205, 200, 238, 0.9) !important;
}

@media (max-width: 575px) {
    #main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row {
        flex-wrap: wrap !important;
        gap: 4px 0 !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row > div:last-child,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area.be-product-overview-module .panel.panel-success .panel-body .row > div:last-child {
        flex: 1 1 100% !important;
        text-align: left !important;
    }
}

/* =========================================================
   Hetzner Cloud — „General Information“ (vps/general.tpl)
   Doppel-Kasten wie bei Quick Actions; .gcontainer + Passwort-UI
   kommen aus modules/.../HetznerCloud/assets/css/style.css (weiß).
   ========================================================= */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer),
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) > .overflow-hidden.card.footer-bg,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) > .card.footer-bg {
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .bg-holder {
    display: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .panel-heading.card-header,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .card-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 16px 18px !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .card-title,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .panel-title {
    color: #fff !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .card-block.table-border-style {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .panel-body.card-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 18px clamp(16px, 4vw, 40px) 22px !important;
}

/* General Info: Zeile nutzt volle Panelbreite (Tabelle + Karte) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .panel-body.card-body > .row,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .panel-body.card-body > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .panel-body.card-body .media-list,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .panel-body.card-body .media-list {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hetzner General Info: eine Glaskarte (Logo + OS + Passwort); volle Breite fürs Passwort — kein col-md-6-Zwang */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .media.be-hcloud-geninfo-media,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .media.be-hcloud-geninfo-media {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    zoom: 1 !important;
    list-style: none !important;
}

/* Nur Layout-Hülle — kein zweiter Kasten; Glas kommt nur vom äußeren .panel-primary */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 22px 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand {
    flex: 0 0 auto !important;
    text-align: center !important;
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__body,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__body {
    flex: 1 1 320px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-head,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-head {
    width: 100% !important;
    margin-bottom: 14px !important;
    text-align: left !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-os-head,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-os-head {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand #osimg,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand #osimg {
    position: relative !important;
    display: inline-block !important;
    overflow: visible !important;
    padding: 6px !important;
    z-index: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand #osimg .hcloud-img-thumbnail,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand #osimg .hcloud-img-thumbnail {
    padding: 10px !important;
    width: 128px !important;
    height: 128px !important;
    box-sizing: border-box !important;
    background: linear-gradient(155deg, #ff9f4a 0%, #ea580c 52%, #c2410c 100%) !important;
    border: 1px solid rgba(255, 220, 170, 0.55) !important;
    box-shadow:
        0 8px 24px rgba(234, 88, 12, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    object-fit: contain !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand #osimg .hcloud-img-thumbnail:hover,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand #osimg .hcloud-img-thumbnail:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 12px 28px rgba(234, 88, 12, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand .status-dot,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__brand .status-dot {
    top: 10px !important;
    right: 10px !important;
    width: 14px !important;
    height: 14px !important;
    z-index: 2 !important;
    border: 2px solid rgba(40, 24, 12, 0.85) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-os-head #osdes,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-os-name,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-os-head #osdes,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-os-name {
    display: inline-block !important;
    margin: 0 !important;
    padding: 10px 22px !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    color: rgba(255, 250, 245, 0.98) !important;
    text-shadow: none !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    white-space: normal !important;
    text-align: center !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-outer,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-outer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner > .be-hcloud-col-serverpass,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner > .be-hcloud-col-rescuepass,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner > .be-hcloud-col-serverpass,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner > .be-hcloud-col-rescuepass,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-pw-inner > #hcrpassword {
    flex: 1 1 280px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card {
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__body,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card__body {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-head,
    section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-head {
        text-align: center !important;
    }
}

/* Passwort-Zeile: nur Innenleiste (äußeres Panel liefert den Rahmen) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card .password-input-container,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .be-hcloud-geninfo-card .password-input-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .coolinput,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .coolinput {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    position: static !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .coolinput label.text,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .coolinput label.text {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(226, 220, 255, 0.95) !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .coolinput > div[style*="flex"],
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .coolinput > div[style*="flex"] {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 4px 6px 4px 12px !important;
    background: rgba(8, 6, 22, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .password-input,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .password-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.96) !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 0 !important;
    max-width: 100% !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.06em !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .password-action-buttons,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .password-action-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    padding-left: 4px !important;
    margin-left: 2px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .password-copy-btn,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .password-toggle-eye-btn,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .password-copy-btn,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .password-toggle-eye-btn {
    color: rgba(200, 210, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease, background 0.15s ease !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .password-copy-btn:hover,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .password-toggle-eye-btn:hover,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .password-copy-btn:hover,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .password-toggle-eye-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Tabelle + Karte: kein zweiter „Kasten“ — gleiche Fläche wie Panel (Modul style.css #fff entfernt) */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 8px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gleft,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gright {
    background: transparent !important;
}

/* Tabellenzeilen: Bootstrap streift auf <tr> (#f9f9f9) + transparente Zellen → weiße Balken.
   Hier tr zurücksetzen und deckende dunkle Zellen (lesbar, einheitlich zum Glaskasten). */
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table > tbody > tr,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table > tbody > tr,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr {
    background: transparent !important;
    background-color: transparent !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table th,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table td,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table th {
    color: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: transparent !important;
    vertical-align: middle !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table td:first-child,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table td:first-child {
    color: rgba(210, 204, 255, 0.88) !important;
    font-weight: 600 !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(odd) > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(odd) > th,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(odd) > td,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(even) > td,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(even) > th,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(even) > td,
section#main-body.be-dashboard-page.be-product-details-page .main-content .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer table.table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: rgba(255, 255, 255, 0.065) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer .gright {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer #map {
    border-radius: 0 10px 10px 0 !important;
    filter: brightness(0.9) saturate(0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .media,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .media-body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .media a,
#main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .media .fa-pencil-alt {
    color: rgba(244, 168, 220, 0.95) !important;
}

@media (max-width: 768px) {
    #main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer .gright {
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #main-body.be-dashboard-page.be-product-details-page .module-client-area .panel.panel-primary:has(.gcontainer) .gcontainer #map {
        border-radius: 0 0 10px 10px !important;
    }
}

@media (max-width: 767px) {
    #main-body.be-dashboard-page.be-product-details-page .product-details-tab-container {
        padding: 12px 8px !important;
    }
}

/* ============================================================
   RTL Support (Arabic, Hebrew, Farsi)
   ============================================================ */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .xs-top-bar-info,
html[dir="rtl"] .top-nav,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .be-footer-menu,
html[dir="rtl"] .be-footer-social {
    direction: rtl;
}

html[dir="rtl"] .pull-md-right {
    float: right !important;
}

html[dir="rtl"] .pull-md-left {
    float: left !important;
}

html[dir="rtl"] .col-md-3.pull-md-left.sidebar {
    float: right !important;
}

html[dir="rtl"] .col-md-9.pull-md-right {
    float: left !important;
}

html[dir="rtl"] .be-footer-col {
    text-align: right;
}

html[dir="rtl"] .be-footer-contact-icon {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .be-home-pricing-check {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .be-home-service-card,
html[dir="rtl"] .be-testimonials-card,
html[dir="rtl"] .be-faq-answer-inner {
    text-align: right;
}

html[dir="rtl"] .fas.fa-check {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .be-contact-direct-item i {
    margin-right: 0;
    margin-left: 12px;
}

html[dir="rtl"] .be-about-value-icon,
html[dir="rtl"] .be-infra-compute-num,
html[dir="rtl"] .be-about-principle-num {
    margin-right: 0;
    margin-left: 16px;
}

html[dir="rtl"] .be-pricing-card-features li i {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .be-infra-eco-arrow i {
    transform: scaleX(-1);
}

html[dir="rtl"] .legal-page ul {
    padding-right: 20px;
    padding-left: 0;
}

html[dir="rtl"] .be-legal-table {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
    left: auto;
    right: 0;
}

/* --- Mobil: Full-Bleed-Sektionen ohne horizontales Scrollen; Safe-Area; Touch-Ziele --- */
@media (max-width: 767px) {
    .be-home-services,
    .be-home-pricing,
    .be-newhero,
    .be-testimonials,
    .be-faq,
    .be-cta {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .be-home-about::after,
    .be-home-services::after,
    .be-home-pricing::after {
        width: 100%;
        left: 0;
        transform: none;
    }

    .be-home-about .container,
    .be-home-services .container,
    .be-home-pricing .container {
        padding-left: max(15px, env(safe-area-inset-left, 0px));
        padding-right: max(15px, env(safe-area-inset-right, 0px));
    }

    .be-footer-inner {
        padding-left: max(24px, env(safe-area-inset-left, 0px));
        padding-right: max(24px, env(safe-area-inset-right, 0px));
        padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
    }

    .be-testimonials {
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }

    .be-cta {
        padding-top: 60px;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-bottom: max(60px, env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 575px) {
    .be-home-services {
        padding-top: 64px;
        padding-bottom: 72px;
    }

    .be-footer {
        padding-top: 48px;
    }
}