:root {
    --main-color: #272e38;
    --main-color-light: #3A4452;
    --main-text-color: #fff;
    --main-headline: #fff;
    --main-sub-headline: #fff;
    --main-button-color: #f69723;
    --main-button-color-light: #f69723c7;
    --main-button-text-color: #272e38;
    --second-button-color: #747474;
    --second-button-text-color: #000000;
    --text-bg: #ffffff12;
    
    /* Modal-Farben im Root definiert */
    --modal-inner-bg: #1a1a1a;
    --modal-inner-color: #fff;
    --modal-inner-border-radius: 0.5rem;
    --modal-inner-padding: 1.5rem;
    --modal-inner-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);


    /*touch of styles :) */
    --border-gradient: linear-gradient(90deg, #f69723 0%, transparent 100%);

}

.offerpreview {
    height: 78vh !Important;

}

.cookie-banner {
    position: fixed;
    /* Fixiert das Element am Bildschirmrand */
    bottom: 20px;
    /* Platziert es am unteren Rand */
    left: 20px;
    /* Platziert es am linken Rand */
    width: 50px;
    /* Breite des Elements */
    height: 50px;
    /* Höhe des Elements */
    background-color: #333;
    /* Hintergrundfarbe */
    color: white;
    /* Textfarbe */
    padding: 0;
    /* Kein Innenabstand nötig */
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.5);
    /* Schattierung für 3D-Effekt */
    display: flex;
    /* Flexbox für einfache Anordnung des Inhalts */
    justify-content: center;
    /* Zentriert den Inhalt horizontal */
    align-items: center;
    /* Zentriert den Inhalt vertikal */
    border-radius: 10px;
    /* Abgerundete Ecken */
    z-index: 9999;
    /* Stellt sicher, dass das Element über anderen Inhalten bleibt */
    cursor: pointer;
    /* Ändert den Mauszeiger in eine Hand bei Hover */
}

.clickableRow tr {
    position: relative !important;
}

#toc .h2 {
    text-indent: 0.25in;
    margin-bottom: 0rem !important;
    line-height: 1.0;
}

#toc .h2 a {
    text-decoration: none;
    color: var(--main-text-color);
    font-size: 1.25rem;
}

#toc .h3 {
    text-indent: .5in;
    margin-bottom: 0rem !important;
    line-height: 1.0;
}

#toc .h3 a {
    text-decoration: none;
    color: var(--main-text-color);
    font-size: 1.25rem;
}

#toc .h4 {
    text-indent: 0.75in;
    margin-bottom: 0rem !important;
    line-height: 1.0;
}

#toc .h4 a {
    text-decoration: none;
    color: var(--main-text-color);
    font-size: 1.25rem;
}

#toc .h5 {
    text-indent: 1in;
    margin-bottom: 0rem !important;
    line-height: 1.0;
}

#toc .h5 a {
    text-decoration: none;
    color: var(--main-text-color);
    font-size: 1.25rem;
}

#toc .h6 {
    text-indent: 1.25in;
    margin-bottom: 0rem !important;
    line-height: 1.0;
}

#toc .h6 a {
    text-decoration: none;
    color: var(--main-text-color);
    font-size: 1.25rem;
}

.clickable {
    cursor: pointer !important;
}

.notifier {
    position: relative;
    display: inline-block;
}

.bell {
    font-size: 26px;
    color: #FFF;
    transition: 0.3s;
}

.bell:hover {
    color: #EF476F;
}

.badge {
    padding: 0 5px;
    font-size: 16px;
    line-height: 22px;
    height: 22px;
    background: var(--main-button-color);
    color: var(--main-button-text-color);
    border-radius: 11px;
    white-space: nowrap;
}

.text-main {
    color: var(--main-button-text-color) !important;
}

/* Fix: Tailwind's .collapse { visibility: collapse } überschreibt Bootstrap's Collapse-Verhalten */
.collapse:not(.show):not(.collapsing) {
    display: none;
    visibility: visible !important;
}
.collapse.show {
    visibility: visible !important;
}

.form-control {
    background-color: var(--main-color) !important;
    color: var(--main-text-color) !important;
    border: 1px solid #3B4655 !important;
}

.form-control:focus {
    background-color: #3A4452 !important;
    color: var(--main-text-color) !important;
    border: 1px solid var(--main-button-color) !important;
    box-shadow: 0 0 0 .25rem rgba(246, 151, 35, .0) !important;
}

.form-select {
    background-color: var(--main-color) !important;
    color: var(--main-text-color) !important;
    border: 1px solid #3B4655 !important;
}

.form-select:focus {
    background-color: #3A4452 !important;
    color: var(--main-text-color) !important;
    border: 1px solid var(--main-button-color) !important;
    box-shadow: 0 0 0 .25rem rgba(246, 151, 35, .0) !important;
}

.btn-back-menu {
    color: #747474 !important;
    border-color: #747474 !important;
    border-radius: .50rem !important;
    margin-bottom: 1rem !important;
}

.btn-back-menu:focus {
    color: #747474 !important;
    border-color: #747474 !important;
    border-radius: .50rem !important;
    box-shadow: 0 0 0 .25rem rgba(246, 151, 35, .0) !important;
}


.timer {
    font-size: 1.5rem;
    color: #fff;
}

.time-segment {
    margin: 5px;
    display: inline-block;
}

.label {
    display: block;
    font-size: 1.0rem;
    color: #fff;
}

.product-img-shadow img {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    border-radius: 0.5rem;
}

.product-text strong {
    color: var(--main-button-color);
}

.product-list ul {
    list-style: square !important;
    padding-left: 1rem !important;
}

.product-list ul li {
    list-style: square !important;
}

.product-list ul ul {
    padding-left: 1.5rem !important;
}

.product-list ol {
    list-style-type: decimal !important;
    padding-left: 1rem !important;

}

.product-list ol li {
    list-style-type: decimal !important;
}

.product-list ol ol {
    padding-left: 1.5rem !important;
}

.page-item.active {
    z-index: 3;
    color: #fff;
    background-color: var(--main-button-color) !Important;
    border-color: none !important;
    font-size: inherit !Important;
}

.page-link {
    position: relative;
    display: block;
    color: #fff;
    text-decoration: none;
    background-color: var(--main-color) !important;
    border: none !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.page-item {
    color: #fff !important;
    border: none !important;
}

.pagination .page-item a {
    font-size: inherit !Important;
    color: #fff !important;
    border: none !important;
}

.custom-card-pricing {
    background-color: var(--main-color) !important;
    border-radius: 0.5rem ! important;
    min-width: 172px ! important;
    padding: 0.5rem ! important;
    box-shadow: 0 4px 250px rgba(255, 111, 60, .6);
    border: 2px solid #ff6f3c !important;
}

.custom-card-pricing .card-body {
    padding-left: 2.4rem !important;
}

.custom-card-pricing .card-footer {
    padding-left: 2.4rem !important;
}

.pricing-font {
    font-size: 1.5rem !important;
    color: #fff !important;
}

.card-dashboard {
    background-color: transparent !important;
    border: none !important;
}

.card-dashboard-header {
    background-color: transparent !important;
    border: none !important;
}

.card-dashboard-body {
    padding: 0rem 0rem !important;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

.accordionTextLeft {
    text-align: left !Important;
    vertical-align: middle !important;
}

#accordion .panel {
    border: none;
    border-radius: 5px;
    box-shadow: none;
    margin-bottom: 10px;
    background: transparent;
}

#accordion .panel-heading {
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    position: relative;
}

#accordion .panel-title a {
    display: block;
    padding: 20px 30px;
    margin: 0;
    background: rgba(0, 0, 0, 0.4);
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    border: none;
    border-radius: 5px;
    position: relative;
}

#accordion .panel-title a.collapsed {
    border: none;
}

#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-align: center;
    font-size: 25px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 15px;
    right: 30px;
    transform: rotate(180deg);
    transition: all .4s cubic-bezier(0.080, 1.090, 0.320, 1.275);
}

#accordion .panel-title a.collapsed:before {
    color: #fff;
    /* transform: rotate(0deg); */
    transform: rotate(180deg);
}

#accordion .panel-body {
    padding: 20px 30px;
    background: rgba(0, 0, 0, 0.1);
    font-size: 15px;
    color: #fff;
    line-height: 28px;
    letter-spacing: 1px;
    border-top: none;
    border-radius: 5px;
}

.fa-square-user:before {
    content: "\e283"
}

.MainContent {
    min-height: calc(100vh - 56px - 56px);
    position: relative;
    padding-top: 7rem;
    /* flex: 1; */
    margin-bottom: 3rem !important;
}

.footer {
    position: absolute;
    width: 100%;
    z-index: 10;
    padding: 20px 0;
    /* background-color: rgb(23,32,47, 0.55) !important;*/
    background-color: var(--main-color) !important;
}

.bg {
    background-color: hsla(0, 0%, 0%, 1) !important;
    background-image:
        radial-gradient(at 1% 99%, hsla(255, 39%, 42%, 0.5) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(326, 35%, 25%, 0.6) 0px, transparent 50%) !important;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    /* z-index usage is up to you.. although there is no need of using it because the default stack context will work. */
}

.bg-img {
    height: 100vh;
    opacity: 1;
}

.bg-gray-900 {
    background-color: rgb(17 24 39 1) !important;
}
.bg-main {
    background-color: var(--main-color) !important;
}

.bg-main-light {
    background-color: var(--main-color-light) !important;
}
.bg-main-dark {
    background-color: #1a202c !important;
}
.bg-main-dark-2 {
    background-color: #2d3748 !important;
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.w-80 {
    width: 80% ! important;
}

.custom-card-shop {
    background-color: var(--main-color) !important;
    border-radius: 0.5rem ! important;
    min-width: 172px ! important;
    padding: 2rem ! important;
}

.custom-card-header-shop {
    border-bottom: 1px solid VAR(--main-button-color) !important
}

.custom-card {
    /*background-color: #17202F! important;*/
    background-color: var(--main-color) !important;
    border-radius: 2.5rem ! important;
    min-width: 172px ! important;
    padding: 2rem ! important;
}

.custom-card-bg {
    background-color: rgb(23, 32, 47, 0.55) !important;
    border-radius: 2.5rem ! important;
    min-width: 172px ! important;
    padding: 2rem ! important;
}

.custom-card-problem {
    background-color: rgb(38, 5, 5, 0.55) !important;
    min-width: 172px ! important;
    padding: 1rem ! important;
}

.custom-card-solution {
    background-color: rgb(20, 38, 5, 0.55) !important;
    min-width: 172px ! important;
    padding: 2rem ! important;
}

.custom-card-accordion {
    background-color: var(--main-color) !important;
    border-radius: 1rem ! important;
    min-width: 172px ! important;
}

.custom-card-accordion-header {
    background-color: transparent ! important;
    color: var(--main-text-color) important;
    font-weight: bold ! important;
    border-bottom: none !important;
    vertical-align: middle !important;
}

.custom-card-header {
    background-color: transparent ! important;
    color: var(--main-text-color) important;
    text-align: center ! important;
    font-weight: bold ! important;
    border-bottom: none !important;
}

.custom-card-header.h3,
h3 {
    color: var(--main-text-color) !important;
    font-weight: bold ! important;
}

.custom-card-header.h4,
h4 {
    color: var(--main-text-color) !important;
    font-weight: bold ! important;
}

custom-card,
p {
    color: var(-main-text-color) !important;
    font-size: 16px;
}

.F-16 {
    font-size: 16px ! important;
    font-weight: bold ! important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #6D6D6D !important;
    border-color: #6D6D6D !important;
}

.btn-secondary {
    background-color: var(--main-color) !Important;
    border-color: var(--main-color) !important;
}

.myButton {
    background-color: #F2EE4E !Important;
}

.myButtonWhite {
    background-color: #fff ! Important;
    color: black ! important;
}

.btn-not-available {
    background-color: var(--second-button-color) !important;
    color: var(--second-button-text-color) !important;
    font-weight: bold ! important;
}

.myButtonOrange {
    background-color: var(--main-button-color) !Important;
    color: var(--main-button-text-color) !important;
    font-weight: bold ! important;
}

th {
    background-color: var(--main-color) !important;
    color: #fff ! important;
}

table {
    --bs-table-bg: rgba(33, 33, 37, 1) ! important;
    --bs-table-accent-bg: transparent ! important;
    --bs-table-striped-color: #fff ! important;
    --bs-table-striped-bg: rgba(33, 33, 37, 1) ! important;
    --bs-table-active-color: #fff ! important;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1) ! important;
    --bs-table-hover-color: #fff ! important;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075) ! important;
    width: 100%;
    margin-bottom: 1rem;
    color: #fff ! important;
    vertical-align: top;
    border-color: #dee2e6;
    caption-side: bottom !important;
    border-collapse: separate !important;
    border-spacing: 0px 10px !important;
}

tbody,
td,
tfoot,
th,
thead {
    border-style: none ! important;
    border-width: 0;
}

tr {
    border-style: none ! important;
    border-width: 0;
}

td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

th {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
}

th:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

th:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

/* .tableLineStyle {
    line-height: 3 !important;
} */

.tableHeadLineStyle {
    line-height: 2 !important;
}

.page-item.active .page-link {
    background-color: #17202F !important;
    color: #fff !important;
}

.pagination-info {
    color: #fff;
}

.page-list {
    color: #fff;
}

/*
    .bootstrap-table .fixed-table-container .table thead th .both {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E") !important;
        background-size: 19px, 19px;
    }

    .bootstrap-table .fixed-table-container .table thead th .asc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E") !important;
        background-size: 19px, 19px;
    }

    .bootstrap-table .fixed-table-container .table thead th .desc {
        background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E") !important;
        background-size: 19px, 19px;
    } /* IE10 & 11 want URL encoded open and close characters */


/* montserrat-500 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('./webfonts/montserrat-v25-latin-500.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./webfonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./webfonts/montserrat-v25-latin-500.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./webfonts/montserrat-v25-latin-500.woff') format('woff'),
        /* Modern Browsers */
        url('./webfonts/montserrat-v25-latin-500.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./webfonts/montserrat-v25-latin-500.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('./webfonts/montserrat-v25-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./webfonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./webfonts/montserrat-v25-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./webfonts/montserrat-v25-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('./webfonts/montserrat-v25-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./webfonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-600 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('./webfonts/montserrat-v25-latin-600.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./webfonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./webfonts/montserrat-v25-latin-600.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./webfonts/montserrat-v25-latin-600.woff') format('woff'),
        /* Modern Browsers */
        url('./webfonts/montserrat-v25-latin-600.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./webfonts/montserrat-v25-latin-600.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-700 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('./webfonts/montserrat-v25-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./webfonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./webfonts/montserrat-v25-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./webfonts/montserrat-v25-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('./webfonts/montserrat-v25-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./webfonts/montserrat-v25-latin-700.svg#Montserrat') format('svg');
    /* Legacy iOS */
}


/* montserrat-800 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('./webfonts/montserrat-v25-latin-800.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./webfonts/montserrat-v25-latin-800.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./webfonts/montserrat-v25-latin-800.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./webfonts/montserrat-v25-latin-800.woff') format('woff'),
        /* Modern Browsers */
        url('./webfonts/montserrat-v25-latin-800.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./webfonts/montserrat-v25-latin-800.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

/* montserrat-900 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('./webfonts/montserrat-v25-latin-900.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./webfonts/montserrat-v25-latin-900.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./webfonts/montserrat-v25-latin-900.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./webfonts/montserrat-v25-latin-900.woff') format('woff'),
        /* Modern Browsers */
        url('./webfonts/montserrat-v25-latin-900.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./webfonts/montserrat-v25-latin-900.svg#Montserrat') format('svg');
    /* Legacy iOS */
}

bg-warning {
    background-color: #F6A238;
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #F6A238;
    --bs-btn-border-color: #F6A238;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ffb75d;
    --bs-btn-hover-border-color: #ffb75d;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ffb75d;
    --bs-btn-active-border-color: #ffb75d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffb75d;
    --bs-btn-disabled-border-color: #ffb75d;
}

html {
    height: 100%;
}

body {
    /* overscroll-behavior: none ! important; */
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    font-family: 'Montserrat', sans-serif;
    font-size: .9rem;
    padding-top: 4.5rem;
    color: #fff !important;
}

bold,
strong {
    font-weight: 700;
}

#wraper {
    flex: 1;
    position: relative;
}

.subline {
    color: var(--main-sub-headline) !important;
}

.h1,
h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #535E7B;
}

.h2,
h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--main-headline);
}

.h3,
h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--main-headline);
}

.opacity {
    /*  -webkit-filter: opacity(.5);
    filter: opacity(.3);*/
    filter: grayscale(100%) opacity(.3);
}

.opacity:hover {
    /*  -webkit-filter: opacity(.3);
    filter: opacity(.3);*/
    filter: none;
    transition: .5s;
}

.z-link {
    cursor: pointer;
    background-color: rgba(78, 151, 157, 0.3);
}

.bgBlau {
    background: rgb(12, 36, 59);
    background: -moz-linear-gradient(0deg, rgba(12, 36, 59, 1) 0%, rgba(12, 36, 59, 1) 15%, rgba(23, 70, 114, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(12, 36, 59, 1) 0%, rgba(12, 36, 59, 1) 15%, rgba(23, 70, 114, 1) 100%);
    background: linear-gradient(0deg, rgba(12, 36, 59, 1) 0%, rgba(12, 36, 59, 1) 15%, rgba(23, 70, 114, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0c243b", endColorstr="#174672", GradientType=1);

}

#divSoftware .card,
#divIT .card,
#divBusiness .card {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(62%, #002a76), color-stop(77%, rgba(0, 62, 164, 0.6)));
    /*  background: linear-gradient(0deg,#002a76 36.36%,rgba(0,62,164,0.63) 102.67%);*/
    background: linear-gradient(0deg, #002a76 60%, rgba(0, 62, 164, 0.6) 77%);
    color: #fff;
}

@media (max-width:1023px) {

    #divIT .card,
    #divBusiness .card {
        background: #002a76;
    }
}

.card-footer {
    background-color: transparent !important;
    border-top: none !important;
}

#divTop {
    position: relative;
    background-color: transparent;
    height: 90vh;
    max-height: 900px;
}

#divTop::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    /*background:url( https://demo.netfactory.de/myfactory50/CustomUpload/374O357O323O352O371O352O350O364O376O357O352O354O371O366O369O376O308O303O/WebPortal/netfactory-dev/img/NETZschmal.png);*/

    /*background: #002D7B;*/
    background-image: url(https://demo.netfactory.de/myfactory50/CustomUpload/374O357O323O352O371O352O350O364O376O357O352O354O371O366O369O376O308O303O/WebPortal/netfactory-dev/img/NETZschmal.png), linear-gradient(to top, #002D7B, #0470F7);

    background: rgb(12, 36, 59);
    background: -moz-linear-gradient(0deg, rgba(23, 70, 114, 1) 0%, rgba(12, 36, 59, 1) 85%, rgba(12, 36, 59, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(23, 70, 114, 1) 0%, rgba(12, 36, 59, 1) 85%, rgba(12, 36, 59, 1) 100%);
    background: linear-gradient(0deg, rgba(23, 70, 114, 1) 0%, rgba(12, 36, 59, 1) 85%, rgba(12, 36, 59, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#174672", endColorstr="#0c243b", GradientType=1);

    background-position: bottom, bottom;
    background-size: contain;
    overflow: hidden;
    width: 100%;
    /*height: calc(100% - 270px);*/
    height: 90vh;
    max-height: 900px;
}



#divHeader {
    position: relative;
    margin-top: 90px;
}

@media (max-height: 720px) {

    #divHeader {
        position: relative;
        margin-top: 30px;
    }
}

#divCardWrap {
    margin-top: -175px;
    position: relative;
}

@media (max-height:720px) {
    #divCardWrap {
        margin-top: -175px;
    }
}

#divAboutWrap {
    margin-top: 5rem;
}

@media (max-width:1023px) {
    #divTop::before {
        position: absolute;
        height: 100%;
        /*max-height:100%;*/
        background-position: bottom;

    }

    #divTop {
        position: relative;
        padding-bottom: 0;
        background-color: #002d7b;
    }

    #htmlCardWrap {
        background-color: #002D7B;
        padding-bottom: 3rem;

        #divCardWrap {
            margin-top: -175px;

            position: relative;
            width: 100vw;
        }
    }

    .navbar-dark {
        --bs-navbar-color: rgba(255, 255, 255, 0.55);
        --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
        --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
        --bs-navbar-active-color: #fff;
        --bs-navbar-brand-color: #fff;
        --bs-navbar-brand-hover-color: #fff;
        --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.99%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }



    #divAboutWrap {
        margin-top: 3rem;
    }
}

@media (min-width:700px) {
    .claim .h1 {
        font-size: 2.5rem;
    }
}

.accordion-button:not(.collapsed) {
    color: #000;
}

#divCardWrap .card {
    -webkit-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
}

#divCardWrap .card:hover {
    -webkit-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0);
}

#divCtLight,
#divRef .card {
    -webkit-box-shadow: 0px 0px 16px -0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 16px -0px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 16px -0px rgba(0, 0, 0, 0.6);
}

#divCtLightCloud,
#divRef .card {
    -webkit-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
}

#divCtKarriere,
#divRef .card {
    -webkit-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 16px -4px rgba(0, 0, 0, 0.6);
}

#divLoesungen .btn-sm {
    border-radius: 15px 0 !important;
}

#navArea {
    background-color: var(--main-color) !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#navArea.fixed-top {
    position: fixed;
}

.dropdown-menu {
    --bs-dropdown-bg: transparent;
}

img {
    max-width: 100%;
    height: auto;
}

@media (min-width:1200px) {
    .offcanvas {
        width: 635px !important;
    }
}

.modal {
    overflow-y: scroll;
}
.modal-center {
    display: flex;
    justify-content: center;
    position: fixed!important;
    top: 0!important;
    left: 5%!important;
    right: 5%!important;
    bottom: 0!important;
    width: 90%!important;    
    height: fit-content!important;
    min-height: 50vh!important;
    z-index: 1055;
    margin: auto;
    padding: 1rem;
    overflow-y: auto;
    pointer-events: none;
}


/* Styling für den Bewertungsmodal */

#comment-textarea {
    width: 100%;
    min-height: 120px;
    color: var(--main-text-color);
    padding: 12px 15px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    resize: vertical;
    border: none;
    transition: all 0.3s ease;
    /* border-left: 6px solid #5E636B; */
    position: relative;
}

#comment-textarea:focus {
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.08);
}

#comment-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

#comment-textarea:focus::placeholder {
    color: rgba(255, 255, 255, 0.6);
    transform: translateX(4px);
}

.textarea-container {
    position: relative;
    margin-bottom: 20px;
}

.textarea-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(to right, var(--main-button-color) 0%, transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    pointer-events: none;
}

.textarea-container:focus-within::after {
    transform: scaleX(1);
}

#bewertungs-modal_CloseButton{
    color: var(--main-text-color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    margin-left: auto;
}

#comment-textarea:focus {
    outline: none!important;
}

.MessageBoxContainer {
    border-radius: 12px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4),0 4px 250px rgba(255, 111, 60, .6)  !important;
    border: 2px solid var(--main-button-color)!important;
    z-index:2000;
    max-width: 860px !important;
    padding: 30px!important;
}


.ButtonContainer {
    position: absolute;
    top: 80px;
    right: 80px;
}

#kommentar {
    margin-top: 20px;
    margin-bottom: 20px;
}

.feedback-heading {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--main-color, #ffffff);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.feedback-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(to right, var(--main-button-color, #f69723) 0%, transparent 100%);
    pointer-events: none;
}


/* Verbesserte Stern-Bewertung */
#sta38510 table {
    margin: 15px 0;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

#sta38510 td {
    padding: 5px !important;
    border: none !important;
    cursor: pointer;
}

.star-img {
    width: 35px;
    height: 35px;
    transition: transform 0.2s ease;
}
#frmschliessen,
#schliessen {
    display: inline;
}
#sta38510 td:hover .star-img {
    transform: scale(1.2);
}
.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
    opacity: var(--bs-backdrop-opacity);
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.3;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    /*  background-color: rgba(75, 186, 178, 0.5)!important;*/
}

.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: rgba(75, 186, 178, 0.5) !important;
}
.modal-header {
    border-bottom: none !important;
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.offcanvas-backdrop {
    background-color: #000;
    /*rgba(75, 186, 178, 1)!important*/
}

.offcanvas-backdrop.show {
    opacity: .3;
    /*pointer-events:none;*/
}

.offcanvas-backdrop.show::after {
    content: "";
    width: 100%;
    height: 100%;
}

.btn-close {
    opacity: 1;
}

@media (max-width: 768px) {
    footer div .border-end {
        border-right: none !important;
    }
}

/*###############  LOGIN  #########################*/

.modal .login-form-container {
    background: transparent none repeat scroll 0 0;
    padding-right: 40px;
    text-align: left;
    border: 0px solid #ddd;
}

.input-form form span {
    display: inline-block;
    padding: .2rem 0 .4rem .5rem;
    color: #383838;
    font-weight: 600;
    letter-spacing: .075em;
}

.login-form-container h5 {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.login-text {
    margin-bottom: 30px;
    text-align: center;
}

.login-text h2 {
    font-size: 30px;
    margin-bottom: 5px;
    text-transform: capitalize;
    color: #444;
}

.login-form-container input[type="text"],
.login-form-container input[type="password"],
.login-form-container input[type="number"],
.login-form-container input[type="date"],
.login-form-container select {
    border-radius: 3px;
    box-shadow: none;
    font-size: 14px;
    margin: 10px 0;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: normal;
}

.login-form-container input::-moz-placeholder {
    opacity: 1;
    color: #999999;
}

.login-toggle-btn {
    padding-top: 10px;
}

.login-form-container input[type="checkbox"] {
    height: 15px;
    margin: 0;
    position: relative;
    top: 1px;
    width: 17px;
}

.login-form-container span {
    font-size: 15px;
    font-weight: 400;
    color: #777;
}

.login-toggle-btn-a {
    float: right;
    transition: all .3s ease 0;
    color: #fff;
}

.now-register {
    position: absolute;
    right: 40px;
    bottom: 60px;
}

.default-btn {
    background: transparent none repeat scroll 0 0;
    font-size: 14px;
    line-height: 1;
    padding: 12px 36px 10px;
    text-transform: uppercase;
    transition: all .3s ease 0;
    border-radius: 50px;
    width: auto;
    border: 1px solid #ddd;
    color: #777;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-card-support {
    background-color: var(--main-color);
    border-radius: 0.5rem;
    min-width: 172px;
    padding: 2rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.custom-card-support h4 {
    margin-bottom: 5px;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    color: #fff;
}

.Ansprechpartner {
    font-size: 0.9rem;
    padding-left: 10px;
    border-left: 3px solid var(--main-button-color);
    border-radius: 4px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    font-style: italic;   
}

.lable {
    font-size: 0.9rem;
    display: block;
    margin-top: 22px;
    margin-bottom: 10px;
    color: var(--main-button-color);
    font-style: italic;
    letter-spacing: 0.03em;
    padding-left: 10px;
    /* border-left: 3px solid var(--main-button-color);     */
    border-radius: 4px 0 0 0;
    text-transform: uppercase;
}
.frage-lable{    
    color: var(--main-text-color);    
    background-color: rgba(255, 255, 255, 0.02);
    font-style: italic;
    font-size: 0.9rem;
    display: block;
    margin-top: 22px;
    padding: 20px 0;
    letter-spacing: 0.03em;
    padding-left: 20px;
    /* border-left: 6px solid #5E636B; */
    border-radius: 1rem 1rem 0 0;
    text-transform: uppercase;
    transition: all 0.2s ease;     
    position: relative;
}
.frage {
    background-color: var(--text-bg);
    padding: 20px 20px;
    margin-bottom: 22px;
    border-radius: 0 0 1rem 1rem;
    color: var(--main-text-color);
    font-size: 1rem;
    line-height: 1.6;
    /* border-left: 6px solid #5E636B;     */
    transition: all 0.2s ease;
}
.frage-lable::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(to right, #5E636B 0%, transparent 100%);
    pointer-events: none;
}
.antwort-lable {
    font-size: 0.9rem;
    display: block;
    margin-top: 22px;
    padding: 20px 0;
    color: var(--main-button-color-light);
    background-color: rgba(246, 151, 35, 0.04);
    font-style: italic;
    letter-spacing: 0.03em;
    padding-left: 20px;
    /* border-left: 6px solid var(--main-button-color); */
    border-radius:  1rem 1rem 0 0;
    text-transform: uppercase;
    transition: all 0.2s ease;     
}
.Antwort {
    background-color: rgba(246, 151, 35, 0.08);
    padding: 20px 20px;
    margin-bottom: 25px;
    min-height: 55px;
    border-radius: 0 0 1rem 1rem;
    /* border-left: 6px solid var(--main-button-color); */
    position: relative;
    color: var(--main-text-color);
    font-size: 1rem;
    line-height: 1.6;
    transition: all 0.2s ease;
}

.Antwort::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: linear-gradient(to right, #f69723c7 0%, transparent 100%);
    pointer-events: none;
}
.titel-container,
.frage-container,
.antwort-container,
.loesung-container {  
    border-radius: 1rem;    
    box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
}
/* ===== E-Mail-Verlauf: Frage (eingehend) & Antwort (ausgehend) ===== */
#support_detail_verlauf {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

/* Wrapper je E-Mail */
.dataform_verlauf {
    display: flex;
    flex-direction: column;
}

/* Gemeinsame Basis */
.detail_verlauf_liste{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.detail_frage,
.detail_antwort {
    width: 80%;
    padding: 16px 20px;
    border-radius: 0 0 1rem 1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--main-text-color, #fff);
    position: relative;
    transition: all 0.2s ease;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Label-Zeile oberhalb */
.detail_frage::before,
.detail_antwort::before {
    content: attr(data-label);
    display: block;
    font-size: 0.9rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 20px;
    border-radius: 1rem 1rem 0 0;
    margin: -16px -20px 12px -20px;
}

/* Frage: grau, rechtsbündig */
.detail_frage {
    align-self: flex-end;
    background-color: var(--text-bg, rgba(255,255,255,0.07));
    border-left: none;
    border-radius: 1rem ;
    margin-left: auto;
}

.detail_frage::before {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--main-text-color, #fff);
    border-bottom: 1px solid;
    border-image: linear-gradient(to left, #5E636B 0%, transparent 100%) 1;
    content: "Eingehend";
}

/* Antwort: orange, linksbündig */
.detail_antwort {
    align-self: flex-start;
    background-color: rgba(246, 151, 35, 0.08);
    border-radius: 1rem;
}

.detail_antwort::before {
    background-color: rgba(246, 151, 35, 0.04);
    color: var(--main-button-color-light, #f69723c7);
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #f69723c7 0%, transparent 100%) 1;
    content: "Antwort";
}

/* Betreff-Link in den E-Mails */
.detail_frage a[id="betreff"],
.detail_antwort a[id="betreff"] {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.95rem;
    opacity: 0.85;
}

#nummer {
    font-weight: 600;
    color: var(--main-button-color);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

#status {
    font-weight: 600;
    background-color: rgba(246, 151, 35, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-left: 8px;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

#lblbewertung {
    font-weight: 600;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.8) !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.8rem;
    td{
        padding: 5px;
    }
}
.star-img{
    width: 35px;
    height: 35px;
}


.rating-container {
    display: inline-block;
    margin-left: 5px;
}

.rating-stars {
    display: inline-flex;
}

.rating-stars .star {
    color: #363D46;
    font-size: 1.2rem;
    margin-right: 4px;
    text-shadow: 0px 0px 1px var(--main-button-color);
    transition: transform 0.2s ease, color 0.2s ease;
}

.rating-stars .star.filled {
    color: var(--main-button-color);
    text-shadow: 0 0 10px rgba(246, 151, 35, 0.5);
}

.rating-stars:hover .star {
    transform: scale(1.1);
}

/* Für ältere Browser, die FontAwesome nicht unterstützen */
.rating-stars .star:before {
    content: "★";
}

#oeffnen,
#schliessen {
    margin-top: 22px;
}
/* Styling für Button-Positionierung in Supporttickets */
.loesung-container + #bewertungs-modal_MainButton {
    display: inline-block;
    margin-right: 10px;
}

/* Container für den "Ticket wieder öffnen" Button */
#oeffnen {
    display: inline-block;
    position: absolute !important;
    right: 2rem;
    bottom: 2rem;
    margin-top: 0 !important;
}


.loesung-container {
    margin-bottom: 60px; 
}


#schliessen,
#oeffnen {
    position: relative;
}
#oeffnen_MainButton{
    position: absolute;
    bottom: 15px;
    right: 3rem;
}

#frmschliessen .btn-back-menu,
#oeffnen_form .btn-back-menu {
    width: auto;
    min-width: 180px;
    text-align: center;    

}


.btn-back-menu {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-back-menu:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.7s ease;
    z-index: -1;
}
.btn-back-menu:hover{
    background-color: rgba(246, 151, 35, 0.2);
    border-color: var(--main-button-color);
    box-shadow: 0 2px 10px rgba(246, 151, 35, 0.3);
}
.btn-back-menu:hover:before {
    left: 100%;
}

.btn-back-menu:active {
    transform: translateY(1px);
    box-shadow: 0 1px 5px rgba(246, 151, 35, 0.2);
}

.badge {
    background-color: var(--main-button-color);
    color: var(--main-color);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/*  Trennlinie */
.custom-card-support hr {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 15px 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* Verbesserte Button-Positionierung für Support-Tickets */
.custom-card-support {
    position: relative; 
        /* background-color: #17202F! important; */
    background-color: var(--main-color) !important;
    border-radius: 2.5rem ! important;
    min-width: 172px ! important;
    padding: 3rem ! important;
}

/* Gemeinsamer Button-Container-Bereich am unteren Rand */
.custom-card-support:after {
    content: "";
    display: block;
    height: 60px; /* Platz für die Buttons */
    clear: both;
}

/* Bewertungs-Button */
#bewertungs-modal_MainButton {
    position: absolute;
    left: 3rem;
    bottom: 2rem;
    z-index: 10; /* Sicherstellen, dass es über dem Inhalt liegt */
    min-width: 120px;
    margin-bottom: 0 !important;
}

/* "Ticket Schließen" Button */
#schliessen {
    position: absolute !important;
    right: 3rem;
    bottom: 1rem;
    z-index: 10;
    margin-top: 0 !important;
}

/* "Ticket wieder öffnen" Button */
#oeffnen {
    position: absolute !important;
    right: 3rem;
    bottom: 2rem;
    z-index: 10;
    margin-top: 0 !important;
}

/* Modal-Anpassungen */
#bewertungs-modal_MainContainer {
    z-index: 1050 !important; 
}

#bewertungs-modal_BackgroundDiv {
    z-index: 1049 !important;
}

.loesung-container {
    margin-bottom: 22px !important; 
}

#frmschliessen .btn-back-menu,
#oeffnen_form .btn-back-menu {
    min-width: 180px;
    text-align: center;
}


@media screen and (max-width: 768px) {
    /* Responsive Anpassungen für kleinere Bildschirme */
    .custom-card-support {
        padding: 2rem !important;
    }    
    #oeffnen {
        right: 1rem;
        bottom: 2rem;
        width: calc(100% - 2rem); 
    }
}

/* Filter-Panel responsive sichtbar/ausblendbar */
.filter-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 768px) {
    .filter-container {
        flex-direction: column;
        display: block;
    }
}



/* ============================================
   MODULÜBERSICHT - CUSTOM STYLES
   ============================================ */

/* Container für Modulkarten */
#divModuleCards {
    background-color: transparent;
    padding: 2.5rem;
    border-radius: 1.5rem;
}

#divModuleCards h1 {
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

/* Modul Card - Spezifischer Selektor für Modulkarten */
#divModuleCards .custom-card {
    background-color: var(--main-color);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    /* padding: 0 !important; */
}

#divModuleCards .custom-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Card Header für Modulkarten */
#divModuleCards .custom-card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem;
    position: relative;
}

#modul-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--main-text-color);
}


/* Card Body Elemente */
.modul-version {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.75rem;
    display: block;
}

.modul-group {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

/* Kategorie Badges */
#cat_1, #cat_2, #cat_3 {    
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    background-color: var(--text-bg);
    color: var(--main-text-color);
    border: 1px solid var(--main-color);
}

/* Modul Beschreibung - Subtiler, informativer Look */
.modul-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    line-height: 1.6;
    background-color: var(--text-bg);
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    padding: 12px 16px;
    border-radius: 4px;
    font-style: normal;
}

/* Container für Badge-Gruppe */
#modul-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
}

/* Modul Tags - Pill-Style mit neutralem Blau/Grau Design */
/* Modul Tags - Neutral im Ruhezustand, Orange beim Hover */
.modul-tags {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}
.modul-tags-simple {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover-Effekt mit Orange */
.modul-tags:hover {
    background: linear-gradient(135deg, rgba(246, 151, 35, 0.2) 0%, rgba(246, 151, 35, 0.12) 100%);
    border-color: var(--main-button-color);
    color: var(--main-button-color);
}

/* Aktiver Filter-Badge - Hervorhebung */
.modul-tags.active-filter {
    background: linear-gradient(135deg, rgba(246, 151, 35, 0.25) 0%, rgba(246, 151, 35, 0.15) 100%);
    border-color: var(--main-button-color);
    color: var(--main-button-color);
    font-weight: 700;
}

.modul-tags.active-filter:hover {
    box-shadow: 0 0 0 2px rgba(246, 151, 35, 0.3), 0 6px 16px rgba(246, 151, 35, 0.25);
}

/* Active/Click-Effekt */
.modul-tags:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(246, 151, 35, 0.2);
}

/* Filter-Display Badge - Nicht-klickbare Version für Filteranzeige */
.filter-display-badge {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.85rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: default;
}

/* Aktiver Filter-Display - Orange Hervorhebung ohne Interaktion */
.filter-display-badge.active {
    background: linear-gradient(135deg, rgba(246, 151, 35, 0.25) 0%, rgba(246, 151, 35, 0.15) 100%);
    border-color: var(--main-button-color);
    color: var(--main-button-color);
    font-weight: 700;
}


/* Card Footer für Modulkarten */
#divModuleCards .card-footer {
    background-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1.25rem;
}

#divModuleCards .card-footer .btn {
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Responsive Anpassungen für Modulübersicht */
@media (max-width: 768px) {
    #divModuleCards {
        padding: 1.5rem;
    }
    
    #divModuleCards h1 {
        font-size: 1.5rem;
    }
    
    #divModuleCards .custom-card {
        margin-bottom: 1.5rem;
    }
    
    #modul-title {
        font-size: 1.1rem;
    }
}

/* 
===================================
--------------UTILS----------------
===================================
*/

.w-fit {
    width: fit-content !important;
}

#MainContent_50 .th-inner{
    width: fit-content;
}