:root {
    --check-positive: #39B54A;
    --check-negative: #807C78;
    --text-light: #717171;
    --provider-headline-color: #545454;
    --bs-breadcrumb-divider: ">";
    --cnvs-body-bg: #eceff1 !important;
    --bs-btn-active-bg: #ffed00;
    --bs-btn-active-border-color: #ffed00;
    --bs-bg-opacity: 0.85;
    --cnvs-color-darkyellow: #bbad00;
    --cnvs-body-font: "Open Sans Light", sans-serif;
    --cnvs-primary-font: "Open Sans Light", sans-serif;
    --cnvs-secondary-font: "Open Sans Light", serif;
    --cnvs-fslider-dots-border-color: #000;
    --cnvs-header-boxshadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
    --cnvs-header-height-shrink: 60px;
    --screen-width: 1920px;
    --container-max-width: 1320px;
}


/* set white-background if direct children of #wrapper has not include content */
#wrapper:has(>.not-include-header) #header {
    background-color: #fff;
}


.sticky-header .menu-link {
    padding: 0px;
    margin: 0px;
}

.sticky-header .input-group-text {
    padding: 5px 10px 5px 25px;
}

.menu-item:hover a, .menu-item:hover > .menu-link {
    color: #000;
}

.menu-item.active a {
    color: #07bede;
}

.menu-item {
    border-bottom: solid 0px #fff;
}

.nwb-top-link {
    top: 0;
}

.anbieterLogin {
    padding: 8px 15px;
    color: #000 !important;
    font-size: 13px;
}

.top-links-item:hover {
    background-color: transparent;
}

.nwb-and-login-shrink {
    display: none;
}

.primary-menu-trigger .cnvs-hamburger {
    --cnvs-hamburger-size: 1.25rem;
}

/** mobile search **/
.mobile-search .search-toggle {
    cursor: pointer;
}

#header:not(.sticky-header) .mobile-search .search-toggle {
    transform: translateY(10px);
}

#header .mobile-search .menu-search {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-color: rgb(33, 33, 33, .7);
}

#header .mobile-search .menu-search.open {
    opacity: 1;
    visibility: visible;
    display: flex;
    align-items: center;
    z-index: 999;
}

.mobile-search .menu-search form {
    max-width: calc(400px - 40px);
    margin: 0 auto;
    width: 100%;
}

/** mobile category dropdown **/
#header:not(.sticky-header) .mobile-categories {
    transform: translateY(10px);
}

.mobile-categories .dropdown-item,
.mobile-categories .highlightText {
    font-size: 14px;
}

.mobile-categories .highlightText {
    font-weight: 600;
    font-family: "Open Sans", serif;
}

.mobile-categories button {
    font-size: 14px;
    background-color: transparent !important;
    border-color: transparent !important;
}

.mobile-categories .dropdown-menu {
    max-height: 75vh;
    overflow-x: auto;
    scrollbar-width: thin;
}


.sticky-header #header-wrap,
.sticky-header .header-row,
.sticky-header #header-wrap #logo,
.sticky-header #header-wrap #logo img,
.sticky-header .menu-container,
.sticky-header .primary-menu {
    height: var(--cnvs-header-height-shrink);
}

@media (min-width: 1400px) {
    .sticky-header .nwb-and-login-shrink {
        display: flex;
        height: 100%;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        max-width: 400px;
    }

    #header.tools-header.sticky-header #header-wrap {
        display: flex;
        justify-content: space-between;
        gap: 36px;
    }

    #header.tools-header.sticky-header #header-wrap > .container {
        margin-left: calc(calc(var(--screen-width, 0) - var(--container-max-width, 0)) / 2);
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        max-width: unset;
    }
}

@media (min-width: 1200px) {
    #header.tools-header .primary-menu {
        border-right: 1px solid var(--cnvs-header-border-color);
    }
}

@media (max-width: 991px) {
    #header.tools-header .primary-menu .menu-link .color-underline {
        background-image: none;
    }
}


@media (max-width: 1199px) {
    .sticky-header #header-wrap {
        box-shadow: 3px 3px 10px #ccc;
    }

    .sticky-header #header-wrap,
    .sticky-header .header-row,
    .sticky-header .menu-container,
    .sticky-header .primary-menu {
        height: auto;
    }

    .sticky-header .primary-menu-active {
        height: auto;
    }

    #header.sticky-header .primary-menu-trigger {
        --cnvs-menu-trigger-gap: 1.25rem 1.75rem;
    }

    .sticky-header .menu-link {
        --cnvs-primary-menu-padding-y: 14px;
        --cnvs-primary-menu-padding-x: 5px;
        display: block !important;
        line-height: 22px !important;
        padding: var(--cnvs-primary-menu-padding-y) var(--cnvs-primary-menu-padding-x) !important;
    }

    #header-wrap #logo img {
        height: calc(var(--cnvs-header-height) * 0.9);
    }

    #header.tools-header .container {
        max-width: unset;
    }

    .header-row .primary-menu-trigger button {
        transform: translateY(10px);
    }

    #header.sticky-header .powered-by-mobile {
        display: none;
    }

    #header.sticky-header .header-row .primary-menu-trigger button {
        transform: none;
    }

    #header.sticky-header .header-row,
    #header.sticky-header #header-wrap {
        --cnvs-header-height-shrink: 60px;
    }

}


#header-wrap .header-misc > a > img {
    max-width: 115px;
}

@media (max-width: 575px) {
    #header-wrap #logo img {
        height: calc(var(--cnvs-header-height) - 15px);
    }

    #header-wrap .header-misc > a > img {
        max-width: 90px;
    }

    #top-bar.tools-top-bar {
        --cnvs-topbar-height: 30px;
    }

    #top-bar.tools-top-bar li a {
        font-size: 12px;
    }

    #top-bar.tools-top-bar li a img {
        max-width: 50px !important;
    }
}

.nwb-poweredby-stickyPadding {
    padding: 14px 0 !important;
}

.powered-by-mobile {
    right: 0;
    top: 0;
    position: absolute;
    padding: 0;
    background-color: var(--cnvs-themecolor);
}

.powered-by-mobile > span {
    font-size: 14px;
}

.powered-by-mobile > img {
    max-height: 25px;
}

.tool-category-mega-menu {
    overflow-y: auto;
    max-height: 60vh;
    scrollbar-width: thin;
}

.highlightText, .hoverBlueColor:hover,
.is-expanded-menu .sub-menu-container .menu-item:hover > .menu-link {
    color: #000;
}

.highlightText i {
    color: var(--cnvs-themecolor) !important;
}

h2.text-rotater {
    line-height: 42px;
}

.text-rotater .t-rotate.morphext, .text-rotater .t-rotate.plugin-typed-init {
    text-shadow: 3px 3px 6px #efefef;
}

#taxandbytes-logo {
    background-image: url('/images/logo/taxandbytes_Main_sw_transparent.svg');
    background-size: 80% auto;
    background-position: center center;
    margin-left: 20px;
    border-left: solid 1px #ccc;
    cursor: pointer;
    width: 130px;
    height: 35px;
}

#taxandbytes-logo:hover {
    background-image: url('/images/logo/taxandbytes_Main_farbe.svg');
}

#taxandbytes-logo img {
    margin-left: 10px;
}

.dark #top-bar, #top-bar.dark {
    border-bottom-color: transparent;
    background-color: transparent !important;
}

.nwb-top-link:hover {
    background-color: #feec02;
}

.top-links-item > a {
    color: #fff;
}

#top-bar .top-links li #toolAnbieterLogin {
    padding: 5px 10px;
    position: relative;
    top: 10px;
    font-size: 12px;
}


#top-bar {
    z-index: 99999;
    background-color: transparent;
    border: solid 0 #fff;
    --cnvs-topbar-height: 43px;
    height: var(--cnvs-topbar-height);
}

@media (max-width: 1199px) {
    #top-bar {
        background-color: #fff;
    }

    #top-bar .top-links {
        border-bottom: 0;
    }
}

body:has(.mfp-ready) #top-bar {
    z-index: 99;
}

#logo {
    padding: 0px;
}

#logo a img {
    padding: 10px 0px !important;
}

#header-wrap {
    border-bottom: 0;
}

#header {
    --cnvs-header-floating-top-offset: 20px;
    --cnvs-primary-menu-font-size: 15px;
    --cnvs-header-height: 80px;
}

.is-expanded-menu #header.transparent-header:not(.sticky-header) #header-wrap {
    border-bottom: 0;
}

/* 
    set offset of slide
    calc (headerHeight - topBarHeight - headerOffset - breadcrumbHeight) 
*/

#hero-slider, .tool-title {
    margin-top: calc(-80px - 43px - 20px - 44px) !important;
}

#header:not(.sticky-header) #header-wrap .container {
    box-shadow: var(--cnvs-header-boxshadow);
}

.is-expanded-menu .sticky-header #header-wrap {
    box-shadow: 2px 2px 10px #ccc;
}


.fbox-icon a, .fbox-icon i, .fbox-icon img {
    height: auto;
}

.fbox-icon {
    width: calc(var(--cnvs-featured-box-icon) + var(--cnvs-featured-box-padding-x) * 8);
}

.box-shadow {
    box-shadow: var(--cnvs-header-boxshadow);
}

.input-group-text {
    padding: 10px 10px 10px 25px;
    border: none;
    background-color: transparent;
}

.fbox-icon {
    display: flex;
    align-items: center;
}


/*************************
TOOL DETAIL 
*************************/

/* === Header === */

/* page title row */
.tool-title .page-title-row {
    align-items: start;
}

[id^=particles-] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.tool-logo {
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray-border-color, rgba(0, 0, 0, 0.175));
}

.tool-header-logo {
    aspect-ratio: 1/1;
}

@media (max-width: 767px) {
    .button.is-play {
        width: 50px;
        height: 50px;
    }

    .button-icon.is-play svg {
        transform: scale(.55);
    }
}

/* page title (ToolName) */
.tool-meta .page-title-content h1,
h1.tool-page-title,
.tool-meta .page-title-content h2{
    font-size: var(--nwb-h3);
    line-height: calc(var(--nwb-h3) + 4px);
    font-weight: 800;
    font-family: "Open Sans", serif;
}

@media (max-width: 991px) {
    h1.tool-page-title {
        font-size: var(--nwb-h4);
        line-height: calc(var(--nwb-h4) + 4px);
    }

    .tool-meta .page-title-content h1 {
        font-size: var(--nwb-h5);
        line-height: calc(var(--nwb-h4) + 4px);
    }
}

@media (max-width: 575px) {
    h1.tool-page-title {
        --nwb-h4: 24px;
        line-height: calc(var(--nwb-h4) + 4px);
    }
}

/** header image **/
.header-image img {
    width: 100%;
    aspect-ratio: 1320/450;
    object-fit: cover;
}

/* toolProvider */
.provider-meta {
    --line-height: 27px;
}

.provider-meta > span,
.provider-meta > a,
.provider-meta .tool-claim-status .claim-badge {
    line-height: var(--line-height);
}

@media (max-width: 575px) {
    .provider-meta {
        flex-direction: column;
    }

    .provider-meta .separator {
        display: none;
    }
}

.tool-provider {
    font-size: 18px;
    font-family: "Open Sans", serif;
    font-weight: 400;
    color: var(--provider-headline-color, #000);
}

.tool-provider.fw-500 {
    font-weight: 500;
}

.tool-provider.fw-500.fs-16 {
    font-size: 16px;
}

.tool-provider i {
    color: var(--provider-headline-color, #000);
}

/* short description */
.tool-short-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-short-description p {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: .5rem;
}

@media (max-width: 991px) {
    .tool-short-description p {
        font-size: 16px
    }
}

/* separator */
.separator {
    color: var(--provider-headline-color, #000);
}

/* badge */
.tool-claim-status .claim-badge i {
    --cnvs-i-size: 1.2rem;
    --cnvs-i-fontsize: 0.75rem;
}

.tool-claim-status .not-claimed i {
    background-color: var(--provider-headline-color, #000);
}

.claim-badge {
    font-size: 16px;
    font-weight: 400;
    font-family: "Open Sans", serif;
    color: var(--provider-headline-color, #000);
    cursor: pointer;
    line-height: 27px;
}

@media (max-width: 575px) {
    .claim-badge {
        font-size: 14px;
    }
}

.is-claimed i {
    --cnvs-i-size: 1.2rem;
    background-color: var(--check-positive);
    --cnvs-i-fontsize: 0.75rem;
}

.claim-badge.not-claimed {
    --nwb-badgeBg-color: var(--cnvs-themecolor);
    --nwb-badge-color: #000;
}


/* badge tooltip body */
.popover .tooltip-wrapper a {
    text-decoration: underline !important;
}

.tooltip-wrapper a {
    color: var(--text-light);
}

.tooltip-wrapper p {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-light);
    margin-bottom: 8px;
}

/** bg video **/
.bg-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* ===  Tool Overview === */

/** tool meta **/
@media (min-width: 767px) {
    .tool-meta {
        --tool-meta-offset: 30px;
        transform: translateY(calc(var(--tool-meta-offset) * -1));
    }
}

@media (min-width: 992px) {
    .tool-meta > div:last-of-type {
        padding-top: calc(var(--tool-meta-offset) + 10px);
    }
}

@media (max-width: 991px) and (min-width: 767px) {
    .tool-meta > div:last-of-type {
        padding-top: calc(var(--tool-meta-offset) - 10px);
    }
}

@media (max-width: 575px) {
    .tool-meta {
        --tool-meta-offset: 60px;
        transform: translateY(calc(var(--tool-meta-offset) * -1));
        margin-bottom: calc(var(--tool-meta-offset) * -1);
    }
}


/** tool navigation **/

#tool-nav {
    padding: 15px 0;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}

@media (min-width: 1200px) {
    #tool-nav {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0;
    }
}

.nav-wrapper:has([role="button"].swiper-button-lock) .swiper-wrapper {
    justify-content: center;
}

.nav-wrapper .swiper-button-prev {
    left: 0;
    top: unset;
    position: relative;
    margin-top: 0;
    height: auto;
    width: 35px;
    display: flex;
    justify-content: flex-start;
}

.nav-wrapper .swiper-button-next {
    right: 0;
    top: unset;
    position: relative;
    margin-top: 0;
    height: auto;
    width: 35px;
    display: flex;
    justify-content: flex-end;
}

.nav-wrapper .swiper-button-prev,
.nav-wrapper .swiper-button-next {
    --swiper-navigation-color: #000;
}

.nav-wrapper .swiper-button-prev.swiper-button-lock,
.nav-wrapper .swiper-button-next.swiper-button-lock {
    display: none;
}

.nav-wrapper .swiper-button-prev.nav-disabled,
.nav-wrapper .swiper-button-next.nav-disabled {
    --swiper-navigation-color: #aeaeae;
}

#tool-nav .tool-nav-slide {
    width: fit-content;
    display: flex;
    align-items: center;
}

.nav-wrapper {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

#tool-nav .logo-slide {
    display: none;
}

@media (min-width: 1200px) {
    .nav-wrapper.sticky #tool-nav .logo-slide {
        display: flex;
    }
}

.logo-slide {
    aspect-ratio: 1/1;
    object-fit: cover;
    max-width: 45px;
    width: auto;
}

.logo-slide {
    margin: 0 15px;
}

#content .nav-wrapper.sticky {
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #fff;
    text-align: center;
    transition: top .2s ease-in-out;
    box-shadow: 2px 10px 10px #ccc;
    width: 100%;
    position: fixed;
}

#header.sticky-header ~ #content .nav-wrapper.sticky {
    top: 60px;
}

.nav-wrapper.sticky #tool-nav {
    justify-content: space-around;
}

#tool-nav .tool-nav-slide a {
    color: #7c7c7c;
    font-size: 16px;
    font-family: "Open Sans", serif;
    font-weight: 500;
    transition: color .2s ease-in-out;
    padding: 0 10px 5px;
    margin: 0 5px;
}

#tool-nav .tool-nav-slide.active a {
    border-bottom: 2px solid #000;
}

#tool-nav .tool-nav-slide.active a, #tool-nav .tool-nav-slide:hover a {
    color: #000;
}


/* offset the anchor tag */
html {
    scroll-padding-top: 140px;
}

/*** Functions ***/
ul.functions-list {
    --fa-li-margin: 1.5em;
}

ul.functions-list li {
    font-weight: 300;
    font-family: "Open Sans", serif;
    font-size: 14px;
    cursor: default;
}

ul.functions-list li:hover i, ul.functions-list li i:hover {
    --cnvs-i-bg-color: transparent !important;
    --cnvs-i-color: #000;
    border-color: #000;
}

ul.functions-list i {
    --cnvs-i-size: 1.1rem;
    --cnvs-i-fontsize: 0.5rem;
    --cnvs-i-bg-color: #000;
    --cnvs-i-color: var(--cnvs-themecolor);
    border-color: #000;
    border-width: 1px;
    border-style: solid;
}

ul.functions-list li:not(:last-of-type) {
    margin-bottom: 0.5rem;
}


/* === Tool Description ===*/

.tool-description-container {
    --tool-card-offset: -175px;
    margin-bottom: var(--tool-card-offset);
}

.tool-card {
    transform: translateY(var(--tool-card-offset));
}

.tool-description h2 {
    font-size: var(--nwb-h5);
    font-family: "Open Sans", serif;
    font-weight: bold;
}


/* === Fact List === */

/*** wrapper ***/
.fact {
    position: relative;
    padding: 10px 15px;
    height: 100%;
    border: 3px solid var(--gray-border-light);
    border-radius: 8px;
}

/*** list ***/
.fact-list {
    --fa-li-margin: 1.75rem;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .fact-list.column-count-2 {
        column-count: 1;
    }
}

.fact-list.column-count-2 .fact-list-item {
    margin-right: 20px;
}

.fact-list .fact-list-item:not(:last-of-type) {
    margin-bottom: 8px;
}

.fact-list:is(.d-flex) > li:not(:first-child) {
    margin-bottom: 0;
    margin-left: calc(var(--fa-li-margin) * 2)
}


/*** list items  ***/
/** headline **/
.fact h5,
.fact h4,
.fact h3,
.fact .fact-title {
    font-size: 17px;
    font-family: "Open Sans", serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 24px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

/* headline icon */

.fact h5 i,
.fact h4 i {
    font-size: 20px;
}

/** list text **/
.fact-value {
    font-size: 16px;
    font-family: "Open Sans", serif;
    font-weight: 300;
}

/** icon span **/
span.fa-li {
    transform: translateY(-2px);
}

/*** icons ***/

/* icon */
.fact .fact-list-item i {
    cursor: inherit;
    --cnvs-i-size: 1.2rem;
    --cnvs-i-fontsize: 0.75rem;
}

/* icon positive */
.fact .fact-list-item i:is(.positive, .negative, .unknown) {
    border-color: var(--fact-border-color);
    border-width: 1px;
    border-style: solid;
}

.fact .fact-list-item i:is(.positive, .negative, .unknown)::before {
    transform: translateY(-1px);
}

.fact .fact-list-item i.positive {
    background-color: var(--check-positive);
    --fact-border-color: var(--check-positive);
}

/* icon negative */
.fact .fact-list-item i.negative {
    background-color: var(--check-negative);
    --fact-border-color: var(--check-negative);
}

/* icon unknown */
.fact .fact-list-item i.unknown {
    background-color: #fff;
    color: var(--check-negative);
    --fact-border-color: var(--check-negative);
}

/* icon prices */
.prices .fact-list-item i.plan-check {
    cursor: inherit;
    background-color: transparent;
    border: 1px solid var(--check-positive);
    color: var(--check-positive);
    transform: translateY(0px);
}

.prices .fact-list-item i.plan-check::before {
    position: relative;
    top: -1px;
}

/* === TOOL Text ===*/

#content .provider-rte h1,
#content .provider-rte h2,
#content .provider-rte h3,
#content .provider-rte h4,
#content .provider-rte h5,
#content .provider-rte h6,
#content .tool-text h4,
#content .tool-text h3,
#content .tool-text .description-title {
    font-size: 18px;
    font-weight: 700;
    font-family: "Open Sans", serif;
}


/** more links **/
.more-links-wrapper a {
    color: black;
    padding: 4px 10px;
    display: flex;
    gap: 10px;
    flex-basis: 20px;
    transition: background-color .4s ease-in-out;
}

.more-links-wrapper i {
    max-width: 20px;
    width: 100%;
    font-size: 20px;
}

.more-links-wrapper a:not(:last-of-type) {
    margin-bottom: 10px;
}

/*==  call to action ==*/

/** sticky appearance **/
.sticky-at-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
}

div.sticky-at-bottom h3 {
    margin-bottom: 0;
    font-size: var(--nwb-h6) !important;
}

div.sticky-at-bottom .row .col-12 {
    width: 50%;
    display: flex;
    align-items: center;
}

div.sticky-at-bottom .row .col-12:first-of-type {
    justify-content: flex-end;
}

div.sticky-at-bottom .row .col-12:last-of-type {
    justify-content: flex-start;
}

div.sticky-at-bottom {
    padding: 20px 0;
    background-color: var(--cnvs-themecolor);
}


.primary-menu li.menu-search {
    width: 100%;
    margin-right: 1rem;
}

@media (max-width: 1199px) {
    .primary-menu .menu-search {
        margin: 5px 0;
    }
}

#logo {
    width: 130px;
}

@media (max-width: 425px) {
    #logo {
        width: 100px;
    }
}

body:not(.gototop-active) .primary-menu .home-search,
body:not(.gototop-active) .mobile-search:has(.home-search) {
    display: none;
}

.menu-item.logo-link img {
    max-height: 22px;
}


#inputSearchMenuForm {
    z-index: 9;
}

.menu-search {
    max-width: 420px;
}


@media (max-width: 991px) {
    .menu-search {
        max-width: 100%;
        margin-bottom: 10px;
    }
}

@media (min-width:1400px) and (max-width:1476px)
{
    .menu-search {
        max-width: 385px;
    }

}

/*=== refs ===*/
.references {
    display: grid;
    gap: 10px;
    justify-content: flex-start;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
    .references {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (min-width: 992px) {
    .references {
        grid-template-columns: repeat(6, 1fr);
    }
}

/*=== highlights ===*/
.highlight-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: "Open Sans", serif;
}

.highlight-content p {
    color: var(--text-light);
}

/*=== Tool functions ===*/

/** section headline **/
.section-title h2 {
    font-family: "Open Sans", serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .section-title h2 {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .section-title h2 {
        font-size: 22px;
    }
}

/*=== Plans ===*/
/** price container **/

.prices {
    --price-height: 400px;
    position: relative;
}

#price .section-title h1{
    font-family: "Open Sans", serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    text-transform: uppercase;
}

@media (max-width: 575px) {
    #content .external-price-button {
        --cnvs-btn-padding-x: .5rem;
        --cnvs-btn-padding-y: .25rem;
        padding-left: var(--cnvs-btn-padding-x);
        padding-right: var(--cnvs-btn-padding-x);
        width: 200px;
    }

    .price-legend {
        display: flex;
        flex-direction: column;
    }
}

.prices .owl-stage-outer {
    max-height: var(--price-height);
}

.prices .owl-stage-outer .owl-stage {
    display: flex;
}

.prices .owl-stage-outer .owl-stage .owl-item {
    display: flex;
    align-items: stretch;
    height: auto !important;
}

.prices .owl-stage-outer .owl-stage .owl-item .oc-item {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* expand button */
.plan-exapnd-btn {
    appearance: none;
    border: 0;
    background-color: inherit;
}

/* item */
.prices .owl-stage .owl-item {
    transition: opacity .1s ease-in-out;
    opacity: 0;
}

.prices .owl-stage .owl-item.active {
    opacity: 1;
}

.prices .card-body {
    padding-top: 2rem;
}

/** price badges **/

/* bestseller badge */
.price-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ff3131;
    color: #fff;
    font-size: 12px;
    font-family: "Open Sans", serif;
    font-weight: 600;
    padding: 0px 10px;
    border-top-right-radius: 5px;
}

/* expanded state */
.prices:has(+ div .plan-exapnd-btn.expand) {
    --price-height: auto;
}

.plan-exapnd-btn.expand i {
    transform: rotateX(-190deg);
}

.prices .owl-stage-outer::after {
    content: "";
    position: absolute;
    height: calc(var(--price-height) / 4);
    width: 100%;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, #fff);
}

.prices .card-body h4 {
    font-family: "Open Sans", serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 32px;
    flex-flow: row wrap;
    column-gap: 8px;
}

.prices .card-body h4 span {
    color: var(--text-light);
    font-weight: 300;
    font-size: 22px;
}

.prices .card-body p, .prices .card-body li {
    color: #000;
}

.prices .card-body p {
    font-weight: 400;
}

.prices .card-body li {
    font-weight: 300;
}


/* plan Meta */
.plan-meta div {
    color: var(--text-light);
}

.plan-meta i {
    color: var(--check-positive);
    margin-right: 5px;
}

.plan-time {
    margin-top: 10px;
    font-size: 14px;
    font-family: "Open Sans", serif;
    color: var(--text-light);
    font-weight: 400;
}

/* price blur effect (when no prices are available */
.price-blur {
    filter: blur(7px);
    position: relative;
}

.no-plans-container {
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
}

/* === Tutorial Section (at least silver) ===*/
.tutorial-entry .tutorial-preview-image {
    aspect-ratio: 512/288;
    object-fit: cover;
    width: 100%;
}

.tutorial-entry .entry-image-container {
    height: 100%;
}

.tutorial-entry .tutorial-title {
    --logo-height: 75px;
}

.tutorial-entry > .row .col {
    max-width: calc(100% - var(--logo-height));
}

.tutorial-entry .tool-logo-link {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    max-width: 100%;
}

.tutorial-entry .tool-logo {
    height: var(--logo-height);
    width: var(--logo-height);
}

.tutorial-wrapper .entry {
    min-width: 0;
    overflow: auto;
}

@media (max-width: 1199px) {
    .tutorial-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 36px;
    }

    .tutorial-wrapper .entry {
        margin-bottom: 0;
    }

    .tutorial-wrapper .tool-logo {
        max-width: 75px;
    }
}

@media (max-width: 767px) {
    .tutorial-wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}

@media (max-width: 315px) {
    .tutorial-wrapper .tool-logo {
        --logo-height: 60px;
    }
}

/** 
IMPORTANT JUST TO DISPLAY A SOLUTION ON HOW TO ENFORCE CONSTANT HEIGHT BETWEEN ELEMENTS BY CUT INFO OFF TEXT 
REMOVE AS YOU DONT NEED
*/
.tutorial-entry .entry-title h4,
.tutorial-entry .entry-title h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tutorial-entry .entry-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* === Provider Contact Section (at least gold) ===*/
.provider-contact-section {
    --cnvs-section-bg: var(--cnvs-themecolor, #f3f3f3);
}

.provider-contact-section .card {
    --bs-card-bg: var(--cnvs-themecolor, #f3f3f3);
}

.contact-action-wrapper {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    margin: 0 36px;
}

.sticky-at-bottom .contact-action-wrapper {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .sticky-at-bottom:has(.contact-action-wrapper) {
        padding: 10px 0;
    }

    .contact-action-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 0 18px;
    }

    .contact-action-wrapper .action-text span {
        font-size: 18px;
    }

    .sticky-at-bottom .contact-action-wrapper .action-buttons a {
        --cnvs-btn-padding-y: .2rem;
        --cnvs-btn-padding-x: .75rem;
        width: 200px;
        font-size: 12px;
    }

}

@media (max-width: 575px) {
    .sticky-at-bottom .contact-action-wrapper .action-text {
        display: none;
    }

    .contact-action-wrapper .action-text span {
        font-size: 14px;
    }
}

.provider-contact-section .card h3 {
    font-size: 28px;
    font-family: "Open Sans", serif;
    font-weight: 800;
}

@media (max-width: 575px) {
    #contact .card {
        height: 226px;
    }
}

/* === Tool More Links (at least gold) === */
.tool-more-link a {
    color: #000;
    font-family: "Open Sans", serif;
    font-size: 16px;
    font-weight: 400;
    border-width: 0 0 1px 0;
    border-radius: 0 !important;
}

.tool-more-link a i {
    --cnvs-i-size: 2.75rem;
    --cnvs-i-bg-color: var(--cnvs-themecolor);
    --cnvs-i-color: #000;
}

.tool-more-link a:hover i,
.tool-more-link a i:hover {
    --cnvs-i-bg-color: var(--cnvs-themecolor);
!important;
    --cnvs-i-color: #000 !important;

}

.tool-more-link a i:hover {
    transform: scale(1.2);
}

.tool-more-link .list-group-item {
    --bs-list-group-border-color: var(--gray-border-color);
    padding-top: 15px;
    padding-bottom: 15px;
}

/* === Tool FAQ (at least silver) === */
.tools-faq .toggle-title {
    font-family: "Open Sans", serif;
    font-weight: 400;
    font-size: 18px;
}

.tools-faq .toggle-content p {
    font-family: "Open Sans", serif;
    font-weight: 300;
    font-size: 16px;
}

@media (max-width: 767px) {
    .tools-faq .toggle-title {
        font-size: 16px;
    }

    .tools-faq .toggle-content p {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .tools-faq .toggle-title {
        font-size: 14px;
    }
}

/* === Tool Media === */
.video-poster {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* === Tool Alternatives === */

.alternative-item {
    border: 1px solid var(--gray-border-color, #000);
    border-radius: 5px;
}

.alternative-item .alternative-header {
    padding-top: 120px;
    margin-bottom: 80px;
    background: #f8f8f8;
}

.alternative-header video {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.alternative-header img {
    max-width: 110px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 65px);
}

.alternative-body h4 span {
    line-height: inherit;
}

.alternative-body h4 {
    --nwb-line-height: 36px;
    --nwb-rows: 1;
    display: -webkit-box;
    text-align: center;
    font-weight: 800;
    margin-bottom: 0;
    font-family: "Open Sans", serif;
    font-size: 26px;
    word-break: break-all;
}

@media (max-width: 991px) {
    .alternative-body h4 {
        font-size: 22px;
        line-height: 30px;
    }
}

.alternative-body h5 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Open Sans', serif;
}

.alternative-body h5 a {
    font-weight: 400;
}

.alternative-body h5 a, .alternative-body i {
    color: var(--provider-headline-color, #000);
}

/* === Category Page === */
/* head */
.category-title h1 {
    font-family: "Open Sans", serif;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.category-title p {
    font-family: "Open Sans", serif;
    font-weight: 300;
    color: var(--text-light);
}

@media (max-width:425px) {
    h1.katNameHeadline {
        font-size: 29px;
        line-height: 34px;
    }
}

/* aside */

@media (min-width: 992px) {
    .sidebar.sticky-sidebar:has(#ad-sticky) {
        --category-offset: 425px;
        top: calc((var(--category-offset) * -1) + 54px);
    }

    .sidebar.sticky-sidebar {
        height: fit-content;
        position: sticky;
        top: var(--bs-gutter-y);
    }
}

@media (min-width: 992px) {
    aside .category-listing:not(:last-of-type) .category-list {
        border-bottom: 2px solid var(--gray-border-color);
    }
}

@media (max-width: 767px) {
    aside .category-listing:not(:last-of-type) .category-list {
        border-bottom: 2px solid var(--gray-border-color);
    }
}

aside .category-listing h5 {
    --headline-bubble-fontSize: 16px;
}

@media (max-width: 1199px) {
    aside .category-listing h5 {
        --headline-bubble-fontSize: 14px;
    }
}

aside .category-list > span:hover a {
    font-weight: 800;
}

aside .category-listing .category-list a {
    color: #000;
    font-size: 16px;
    font-family: "Open Sans", serif;
    font-weight: 400;
}

/* relevance tooltip */
.html-tooltip {
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 300px;
    --bs-tooltip-padding-x: 1rem;
    --bs-tooltip-padding-y: 0.5rem;
    --bs-tooltip-margin: ;
    --bs-tooltip-font-size: 0.875rem;
    --bs-tooltip-color: #000;
    --bs-tooltip-bg: #fff;
    --bs-tooltip-border-radius: var(--bs-border-radius);
    --bs-tooltip-opacity: 0.9;
    --bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
}

.html-tooltip .tooltip-inner {

}

/** tool detail item **/

/* title */
.tool-item-detail {
    border: 1px solid rgba(0, 0, 0, 0.175);
}

.tool-item-detail h2 {
    font-weight: 800;
    font-family: "Open Sans", serif;
    font-size: 30px;
    line-height: 28px;
    margin-bottom: 5px;
}

.tool-item-detail .tool-provider,
.compare-item .tool-provider,
.provider-meta .tool-provider {
    font-weight: 500;
    font-size: 16px;
}

/* description */
.tool-description {
    font-family: "Open Sans", serif;
    font-size: 16px;
    font-weight: 400;
}


/** tool text **/
.tool-item-detail .show-more {
    --show-more-height: 125px;
    max-height: var(--show-more-height);
    overflow-y: hidden;
    position: relative;
}

.tool-item-detail .show-more:after {
    content: "";
    position: absolute;
    height: calc(var(--show-more-height) / 2);
    width: 100%;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, #fff);
}

.tool-card-bg.tool-item-detail .show-more:after {
    background: linear-gradient(to bottom, transparent, var(--tool-card-bg));
}

.tool-item-detail .show-more:has(+ div .plan-exapnd-btn.expand) {
    --show-more-height: auto;
}

/* tool "leistungsmerkmale" */

.tool-item-detail .fact-list .fact-value {
    font-size: 14px;
    font-weight: 400;
}

.tool-item-detail .fact-list .i-style {
    --cnvs-i-color: #fff;
}

/** tool stats **/
.tool-item-detail .fact-list .fact-list-item {
    margin-bottom: 0;
}

.tool-item-detail .fact-list {
    --fa-li-margin: 1.25rem;
}

.tool-item-detail .tool-stats .fact {
    padding: 10px 12px;
}

.tool-item-detail .tool-stats ul li:not(:last-of-type) {
    margin-right: 2.5rem;
}

.tool-item-detail .tool-stats ul li .fa-li {
    --fa-li-width: 1.5em;
}

.tool-item-detail .tool-stats ul li .fa-li i {
    --cnvs-i-size: 1rem;
    --cnvs-i-fontsize: 0.65rem;
}

/* fact plan */
.tool-item-detail .plan-meta span {
    font-size: 14px;
    font-weight: 400;
}

/* === Provider ===*/
.tool-count {
    font-family: "Open Sans", serif;
    font-size: 42px;
    line-height: 48px;
    font-weight: 700;
    text-align: center;
}

.pagination-action-wrapper {
    display: none;
}

.pagination-action-wrapper:has(#loading-more) {
    display: block;
}

/******************************
Compare Tools
******************************/

/* === Compare Frames ===*/
.compare-frame.has-border {
    border: 1px solid var(--gray-border-color);
}

.compare-frame .swiper-slide:not(.swiper-slide-active) {
    opacity: 0 !important;
}

/* === Compare Item Header ===*/
.compare-frame .compare-item .page-title-content h2 {
    --nwb-line-height: 40px;
    --nwb-rows: 2;
    height: auto !important;
    font-size: var(--nwb-h3);
    font-weight: 800;
    font-family: "Open Sans", serif;
    line-height: var(--nwb-line-height, 32px);
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: var(--nwb-rows, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1199px) {
    .compare-frame .compare-item .page-title-content h2 {
        --nwb-h3: 24px;
        --nwb-line-height: 32px;
        margin: 8px 0;
    }
}

/* === Compare Functions === */
.small-section-title h3 {
    font-size: 24px;
    font-weight: 700;
    font-family: "Open Sans", serif;
}

.small-section-title h3::after {
    content: "";
    width: 100px;
    display: block;
    border-bottom: 1px solid #000;
}

/* === Compared to item === */
.compare-frame:has(.compare-to) {
    border: 1px solid var(--gray-border-color);
}

/* === Slider Navigation ===*/
.compare-frame .slider-arrow-left, .compare-frame .slider-arrow-right {
    --cnvs-slider-arrows-bg-color: var(--cnvs-themecolor);
    --cnvs-slider-arrow-color: #000;
    top: 100px;
    border-radius: 50px;
}

.compare-frame .slider-arrow-left:hover, .compare-frame .slider-arrow-right:hover {
    --cnvs-slider-arrows-bg-color: #000;
    --cnvs-slider-arrow-color: var(--cnvs-themecolor);
}

@media (min-width: 576px) {
    .compare-frame .slider-arrow-left {
        left: -10px;
    }

    .compare-frame .slider-arrow-right {
        right: -10px;
    }
}

@media (max-width: 575px) {
    .compare-frame .slider-arrow-left,
    .compare-frame .slider-arrow-right {
        --cnvs-slider-arrows-size: 42px;
    }
}

.swiper-button-disabled {
    display: none;
}

/* === Cutoff Colors === */
.compare-frame.tool-card-bg .cutoff-text {
    --fade-away-color: var(--tool-card-bg);
}

.compare-frame.bg-white .cutoff-text {
    --fade-away-color: #fff;
}

/* === Prices === */

@media (max-width: 575px) {
    .prices .card-body h4 {
        font-size: 22px;
    }

    .prices .card-body h4 span {
        font-size: 18px;
    }

}

/**************************
Sponsored Articles 
**************************/

/* === SideBar === */
/** card **/
/* card body */
.card-tool {
    --bs-card-bg: #f3f3f3;
    --bs-card-border-width: 0;
}

/* card headline (tool-name) */
.card-tool h2 {
    font-size: 22px;
    line-height: 24px;
    font-family: "Open Sans", Sans-serif, serif;
    font-weight: 600;
}

/* card sub line (tool-provider) */
.card-tool h4.tool-provider {
    font-size: 16px;
    line-height: 22px;
    font-family: "Open Sans", Sans-serif, serif;
    font-weight: 300;
}

/* card badge */
.card-tool .claim-badge {
    font-size: 16px;
}

/* === Preview Item === */
.entry-row {
    --cnvs-post-item-margin: 50px;
    margin-bottom: calc(var(--cnvs-post-item-margin, 50px) * -1);
}

.tool-article .entry-image img {
    aspect-ratio: 416/277;
    object-fit: contain;
}

@media (max-width: 991px) {
    .tool-article {
        --cnvs-post-item-margin: 30px;
    }
}

h1.sponsored-post-headline {
    margin: 0;
    font-size: var(--cnvs-post-title-font-size);
    font-weight: var(--cnvs-post-title-font-weight);
    text-transform: var(--cnvs-post-title-text-transform);
    letter-spacing: var(--cnvs-post-title-font-spacing);
}

/*******************************
Tools Home 
********************************/
/* === hero slider === */
#hero-slider h1 > span {
    font-size: 46px;
    line-height: 50px;
    font-family: "Open Sans", serif;
    font-weight: 800;
    padding-top: 4px;
    padding-bottom: 4px;
}

.introBox h1, .hero-slider-title h1 {
    font-family: "Open Sans 800";
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    padding: 0;
    transform: none;
    margin-bottom: 0px;
}

.introBox h1 > span, .hero-slider-title h1 > span {
    font-size: 30px;
    line-height: 38px;
    margin-bottom: 9px;
    font-family: "Open Sans 800";
    font-weight: 800;
    text-transform: uppercase;
    color: #fff !important;
    background: #000;
    padding: 10px 20px;
    transform: rotate(358deg);
    margin-bottom: 30px;
}

.introBox h1 > span span, .hero-slider-title h1 > span span {
    color: var(--cnvs-themecolor);
}

#hero-slider h2 {
    font-size: 26px;
    line-height: 42px;
    font-family: "Open Sans", serif;
    font-weight: 400;
    color: #000;
}

#hero-slider .t-rotate {
    font-family: "Open Sans", serif;
    font-weight: 700;
}

/* position the layer image */
#hero-slider .layer-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#hero-slider .layer-container .layer-img {
    position: absolute;
    bottom: 0;
    right: 0;
}

@media (min-width: 992px) {
    #hero-slider {
        height: 750px;
        min-height: 750px;
    }

    #hero-slider .vertical-middle {
        padding-bottom: 100px;
    }
}

@media (min-width: 1200px) {
    #hero-slider {
        height: 830px;
        min-height: 830px;
    }

    #hero-slider .vertical-middle {
        padding-bottom: 100px;
    }
}

@media (max-width: 1399px) {
    #hero-slider h1 > span {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (max-width: 1199px) {
    #hero-slider .layer-container .layer-img {
        max-height: 550px;
    }

    #hero-slider h1 {
        font-size: 38px;
        line-height: 40px;
    }
}

@media (max-width: 991px) {
    #hero-slider {
        min-height: 650px;
        height: 650px;
    }

    #hero-slider .layer-container .layer-img {
        max-height: 475px;
    }

    #hero-slider .vertical-middle {
        padding-bottom: 50px;
    }

    #hero-slider #pointer-slide {
        max-width: 350px;
    }

    #hero-slider h1 > span {
        font-size: 32px;
        line-height: 41px;
    }

    #hero-slider h2 {
        font-size: 22px;
        line-height: 30px;
    }

    #hero-slider .layer-container .layer-img {
        right: -75px;
    }

    #hero-slider .subscribe-widget {
        max-width: 450px;
    }
}

@media (max-width: 767px) {
    #hero-slider {
        min-height: 550px;
        height: 550px;
    }

    #hero-slider h1 {
        font-size: 28px;
        line-height: 37px;
        margin-left: 0;
    }

    #hero-slider h2 {
        font-size: 18px;
        line-height: 24px;
    }

    #hero-slider .subscribe-widget {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    #hero-slider {
        min-height: 500px;
        height: 500px;
    }

    #hero-slider .vertical-middle {
        padding-bottom: 0;
    }

    #hero-slider h1 > span {
        font-size: 25px;
        line-height: 33px;
    }

    #hero-slider h2 {
        font-size: 15px;
        line-height: 22px;
    }

    #hero-slider .hero-slider-title > .row > div {
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
    }

    #hero-slider #inputSearchMenuForm {
        --search-height: 40px;
    }

    #hero-slider #inputSearchMenuForm input[type="text"] {
        font-size: 14px;
    }

    #hero-slider #inputSearchMenuForm .uil-search {
        font-size: 14px;
    }
}

@media (max-width: 455px) {
    #hero-slider h1 > span {
        font-size: 16px;
        line-height: 28px;
    }
}

/************************
=== TUTORIAL DETAIL ===
************************/
/* === Logo === */
.tutorial-video-wrapper .tool-logo {
    aspect-ratio: 1/1;
    object-fit: cover;
    max-width: 80px;
    width: 100%;
}

/*=== Title === */

.tutorials-headline {
    font-family: "Open Sans", serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 34px;
    text-transform: uppercase;
}

@media (max-width: 1199px) {
    .tutorial-video-wrapper .entry-title h2 {
        --nwb-h2: 34px;
    }
}

@media (max-width: 991px) {
    .tutorial-video-wrapper .entry-title h2 {
        --nwb-h2: 24px;
    }
}

@media (max-width: 767px) {
    .tutorial-video-wrapper .entry-title h2 {
        --nwb-h2: 20px;
    }
}