/* Google Font Rubik */
/* rubik-300 - latin */
/*
@font-face {
    font-family: 'Rubik';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/rubik-v21-latin-300.eot'); !* IE9 Compat Modes *!
    src: url('../fonts/rubik-v21-latin-300.eot?#iefix') format('embedded-opentype'), !* IE6-IE8 *!
    url('../fonts/rubik-v21-latin-300.woff2') format('woff2'), !* Super Modern Browsers *!
    url('../fonts/rubik-v21-latin-300.woff') format('woff'), !* Modern Browsers *!
    url('../fonts/rubik-v21-latin-300.ttf') format('truetype'), !* Safari, Android, iOS *!
    url('../fonts/rubik-v21-latin-300.svg#Rubik') format('svg'); !* Legacy iOS *!
}

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

!* rubik-500 - latin *!
@font-face {
    font-family: 'Rubik';
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/rubik-v21-latin-500.eot'); !* IE9 Compat Modes *!
    src: url('../fonts/rubik-v21-latin-500.eot?#iefix') format('embedded-opentype'), !* IE6-IE8 *!
    url('../fonts/rubik-v21-latin-500.woff2') format('woff2'), !* Super Modern Browsers *!
    url('../fonts/rubik-v21-latin-500.woff') format('woff'), !* Modern Browsers *!
    url('../fonts/rubik-v21-latin-500.ttf') format('truetype'), !* Safari, Android, iOS *!
    url('../fonts/rubik-v21-latin-500.svg#Rubik') format('svg'); !* Legacy iOS *!
}

!* rubik-700 - latin *!
@font-face {
    font-family: 'Rubik';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/rubik-v21-latin-700.eot'); !* IE9 Compat Modes *!
    src: url('../fonts/rubik-v21-latin-700.eot?#iefix') format('embedded-opentype'), !* IE6-IE8 *!
    url('../fonts/rubik-v21-latin-700.woff2') format('woff2'), !* Super Modern Browsers *!
    url('../fonts/rubik-v21-latin-700.woff') format('woff'), !* Modern Browsers *!
    url('../fonts/rubik-v21-latin-700.ttf') format('truetype'), !* Safari, Android, iOS *!
    url('../fonts/rubik-v21-latin-700.svg#Rubik') format('svg'); !* Legacy iOS *!
}
*/
/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

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

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

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

.page-wrapper {
    margin-top: 75px;
}

@media (min-width: 768px) {
    .page-wrapper {
        margin-top: 80px;
    }
}

.navbar-sticky.navbar-stuck {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-animation: navbar-show 0.25s;
    animation: navbar-show 0.25s;
    box-shadow: 0 0.25rem 0.5625rem -0.0625rem rgba(0, 0, 0, 0.03), 0 0.275rem 1.25rem -0.0625rem rgba(0, 0, 0, 0.05);
    z-index: 1030;
}

/* ... wenn Text zu lang (nur für eine Zeile gültig  */
p.overflow-ellipsis {
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.widget-categories .accordion-button {
    font-size: 1rem !important;
}

.widget-cart-item .btn-close {
    position: absolute;
    padding-right: 10px;
    top: 45px;
    font-size: 1.5rem;
    font-weight: 400;
}

/*
 * für Upload Dropzone
 */
.dropzone {
    border: 2px dashed #dee2e6;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    min-height: 100px;
    padding: 10px;
}

.dropzone .dz-message {
    text-align: center;
    margin: 2rem 0;
}

.dropzone.dz-started .dz-message {
    display: none;
}


/* ------------------------------------------- */

.loading-screen {
    background-color: rgba(0,0,0,.7);
    position: fixed;
    line-height: 40px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 100%;
    z-index: 9999;
}

.loading-screen > span {
    color: #FFF;
    display: block;
    font-size: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* ------------------------------------------- */


/*
 * CSS für Daten aus dem Editor
 */

.js-editor {
    margin: 10px;
    padding: 10px;
}

.js-editor span.text-tiny {
    font-size: x-small;
}

.js-editor span.text-small {
    font-size: small;
}

.js-editor span.text-big {
    font-size: large;
}

.js-editor span.text-huge {
    font-size: x-large;
}

.js-editor p {
    line-break: auto;
}


/* ------------------------------------------- */


/*
 * CSS für Carousel funktion
 */

.tns-carousel [data-nav].tns-nav-active {
    width: 1.5rem;
    background-color: #fe696a;
}
.tns-carousel [data-nav] {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin: 0 .375rem;
    padding: 0;
    transition: width .2s ease-in-out,background-color .2s ease-in-out;
    border: 0;
    border-radius: .15625rem;
    background-color: #b6bcc5;
}

.heart-favorite {
    position: absolute;
    bottom: -6px;
    left: 7px;
}

div.profile-img {
    position: relative;
}

span.online-circle {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #42d697;
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.25rem;
}

span.online-circle-mitarbeiter {
    bottom: 2px;
    right: 10px;
    width: 20px;
    height: 20px;
}


.bg-samstag {
    background-color:rgba(53, 184, 224, 0.10);
}
.bg-sonntag {
    background-color:rgba(53, 184, 224, 0.10);
}



.dropdown-click .dropdown > .dropdown-menu.show {
    display: block;
}

@media(max-width: 768px) {
    .navbar-tool .notification-dropdown.dropdown-menu {
        left: 0;
        right: 0;
        transform: translateX(-50%);
        width: 80vw;
    }

    .notification-dropdown .dropdown-item {
        white-space: normal;
    }

    .notification-dropdown>div {
        min-width: auto !important;
    }
}


/* ------------------------------------------- */


/*
 * CSS für Chat
 */


.conversation-list {
    list-style: none;
    padding: 0 15px
}

.conversation-list li {
    margin-bottom: 20px
}

.conversation-list li .conversation-actions {
    float: right;
    display: none
}

.conversation-list li:hover .conversation-actions {
    display: block
}

.conversation-list .chat-avatar {
    float: left;
    text-align: center;
    width: 42px
}

.conversation-list .chat-avatar img {
    border-radius: 100%;
    width: 100%
}

.conversation-list .chat-avatar i {
    font-size: 12px;
    font-style: normal
}

.conversation-list .ctext-wrap {
    background: #f1f3fa;
    border-radius: 3px;
    display: inline-block;
    padding: 12px;
    position: relative
}

.conversation-list .ctext-wrap i {
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    position: relative
}

.conversation-list .ctext-wrap p {
    margin: 0;
    padding-top: 3px;
    white-space: pre-wrap;
}

.conversation-list .ctext-wrap:after {
    left: -11px;
    top: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #f1f3fa;
    border-width: 6px;
    margin-right: -1px;
    border-right-color: #f1f3fa
}

.conversation-list .conversation-text {
    float: left;
    font-size: 13px;
    margin-left: 12px;
    width: 70%
}

.conversation-list .odd .chat-avatar {
    float: right !important
}

.conversation-list .odd .conversation-text {
    float: right !important;
    margin-right: 12px;
    text-align: right;
    width: 70% !important
}

.conversation-list .odd .ctext-wrap {
    background-color: #fef5e4
}

.conversation-list .odd .ctext-wrap:after {
    border-color: transparent;
    border-left-color: #fef5e4;
    border-top-color: #fef5e4;
    right: -10px;
    left: auto
}

.conversation-list .odd .conversation-actions {
    float: left
}

/* ------------------------------------------- */


/*
 * CSS für Startseiten Header
 */
.top-header-image-section {
    background-color: #003963;
    padding-bottom: 20px;
}

.top-header-image-section .container {
    position: relative;
}

.top-header-image-section .header-image {
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 10px 1.525rem -0.375rem rgb(0 0 0);
    margin-left: calc(var(--bs-gutter-x, 0.9375rem) * -1);
    margin-right: calc(var(--bs-gutter-x, 0.9375rem) * -1);
}

.top-header-image-section .info-text {
    margin-top: 0px;
    margin-bottom: 20px;
}

.top-header-image-section .filter {
    padding: 10px;
}

@media(min-width: 768px) {
    .top-header-image-section .header-image {
        border-bottom-left-radius: .4375rem;
        border-bottom-right-radius: .4375rem;
        box-shadow: 0 0 0 0;
    }

    .top-header-image-section .info-text {
        /*background-color: rgba(255, 255, 255, .5);*/
        backdrop-filter: blur(5px);
        border-radius: .4375rem;
        padding: 20px;
        position: absolute;
        top: 0;
        left: 50px;
        /*
        max-width: 600px;
        */
        max-width: 60%;
    }

    /*
    .top-header-image-section .info-text h1 {
        font-size: 20px;
    }
    */

    .top-header-image-section .filter {
        margin-top: -120px;
    }
}

@media(min-width: 1200px) {
    .top-header-image-section .info-text h1 {
        font-size: 2.5rem;
    }
}

.seminar-slider-section {
    z-index: 10;
}

@media(min-width: 992px) {
    .seminar-slider-section {
        margin-top: -60px;
    }
}


/* Startseite */
@media(min-width: 1200px) {
    .ueberschrift-startseite {
        font-size: 60px !important;
        font-weight: 400 !important;
    }

    .ueberschrift2-startseite {
        font-size: 24px !important;
    }
}
@media(max-width: 768px) {
    .ueberschrift-startseite {
        font-size: 35px !important;
        font-weight: 400 !important;
    }
}

/* RIBBION HYPER 4 */

.ribbon-box {
    position: relative;
}

.ribbon-box .ribbon {
    position: relative;
    clear: both;
    padding: 5px 12px;
    /* margin-bottom: 15px; */
    box-shadow: 2px 5px 10px rgba(50,58,70,.15);
    color: white;
    font-size: 13px;
    /* font-weight: $ font-weight-semibold; */
}

.ribbon-box .ribbon:before {
    content: " ";
    border-style: solid;
    border-width: 10px;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 0;
    margin-bottom: -10px;
    z-index: -1;
}

.ribbon-box .ribbon-primary::before {
    border-color: #3d5ae3 transparent transparent;
}

.ribbon-box .ribbon-success::before {
    border-color: #0eac5c transparent transparent;
}

.ribbon-box .ribbon-info::before {
    border-color: #35b8e0 transparent transparent;
}

.ribbon-box .ribbon-warning::before {
    border-color: #fea569 transparent transparent;
}


.ribbon-box .ribbon.float-start {
    margin-left: -30px;
    border-radius: 0 3px 3px 0;
}

.ribbon-box .ribbon.float-end {
    margin-right: -30px;
    border-radius: 3px 0 0 3px;
}

.ribbon-box .ribbon.float-end:before {
    right: 0;
}

.ribbon-box .ribbon.float-center span {
    margin: 0 auto 20px auto;
}

.ribbon-box .ribbon-content {
    clear: both;
}

/* Ribbon two */
.ribbon-box .ribbon-two {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right;
}

.ribbon-box span.ribbon-span {
    font-size: 13px;
    color: white;
    text-align: center;
    line-height: 20px;
    transform: rotate(-45deg);
    width: 100px;
    display: block;
    /* box-shadow: 0 0 8px 0 rgba($ dark, 0.08), 0 1px 0 0 rgba($ dark, 0.03); */
    position: absolute;
    top: 19px;
    left: -21px;
    /* font-weight: $ font-weight-semibold; */
}

.ribbon-box span.ribbon-span:before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    z-index: -1;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.ribbon-box span.ribbon-span:after {
    content: "";
    position: absolute;
    right: 0;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

.ribbon-box .ribbon-primary {
    background: #536de6;
}

.ribbon-box .ribbon-success {
    background: #10c469;
}

.ribbon-box .ribbon-info {
    background: #35b8e0;
}

.ribbon-box .ribbon-warning {
    background: #fea569;
}

@media (max-width: 767px) {
    .fileupload-buttonbar .delete,
    .fileupload-buttonbar .toggle,
    .files .toggle,
    .files .btn span {
        display: block !important;
    }
}

/* Schriftgrößen Mobile */
@media (max-width: 768px) {
    body {
        font-size: 1.2rem;
    }

    /* selbe größe wie im body */
    .widget-categories .accordion-button {
        font-size: 1.15rem !important;
    }
    .widget-filter-item-text {
        font-size: 1.15rem !important;
    }
    .widget-links-anpassen {
        font-size: 1.15rem !important;
    }

    /* ------------------------- */

    .fs-1 {
        font-size: calc(1.375em + 1.5vw) !important;
    }

    .fs-2 {
        font-size: calc(1.325em + 0.9vw) !important;
    }

    .fs-3 {
        font-size: calc(1.3em + 0.6vw) !important;
    }

    .fs-4 {
        font-size: calc(1.275em + 0.3vw) !important;
    }

    .fs-5 {
        font-size: 1.25em !important;
    }

    .fs-6 {
        font-size: 1.0625em !important;
    }

    .fs-xl {
        font-size: calc(1.2875em + 0.45vw) !important;
    }

    .fs-lg {
        font-size: 1.125em !important;
    }

    .fs-base {
        font-size: 1em !important;
    }

    .fs-md {
        font-size: 0.9375em !important;
    }

    .fs-sm {
        font-size: 0.875em !important;
    }

    .fs-ms {
        font-size: 0.8125em !important;
    }

    .fs-xs {
        font-size: 0.75em !important;
    }

}

@media (max-width: 768px) {
    .fs-mobile-xl {
        font-size: calc(1.2875em + 0.45vw) !important;
    }

    .fs-mobile-lg {
        font-size: 1.125em !important;
    }

    .fs-mobile-base {
        font-size: 1em !important;
    }

    .fs-mobile-md {
        font-size: 0.9375em !important;
    }

    .fs-mobile-sm {
        font-size: 0.875em !important;
    }

    .fs-mobile-ms {
        font-size: 0.8125em !important;
    }

    .fs-mobile-xs {
        font-size: 0.75em !important;
    }
}

@media (min-width: 768px) {
    .fs-desktop-xl {
        font-size: calc(1.2875em + 0.45vw) !important;
    }

    .fs-desktop-lg {
        font-size: 1.125em !important;
    }

    .fs-desktop-base {
        font-size: 1em !important;
    }

    .fs-desktop-md {
        font-size: 0.9375em !important;
    }

    .fs-desktop-sm {
        font-size: 0.875rem !important
    }

    .fs-desktop-ms {
        font-size: 0.8125em !important;
    }

    .fs-desktop-xs {
        font-size: 0.75em !important;
    }
}