/* =======================================
   Media Query: Desktop only
   ======================================= */

@media (min-width: 62rem) { /* 992px */
    html {
        scroll-padding-top: 120px;
    }
    h1,.h1 {font-size: var(--40px);}
    h2,.h2 {font-size: var(--32px);}
    h3,.h3 {font-size: var(--26px);}
    h4,.h4 {font-size: var(--22px);}
    h5,.h5 {font-size: var(--18px);}
    h6,.h6 {font-size: var(--16px);}
    /* #desktop header */
    header#site-header .header-top #logo-img {
        height: 45px;
    }
    header#site-header {
        box-shadow: 0px 0px 15px rgba(0,0,0,.15);
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item {
        border-bottom: none;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item a {
        padding-top: var(--9px);
        padding-bottom: var(--8px);
        white-space: nowrap;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>div>a:hover {
        background: transparent;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item.dropdown a {
        border-right: none;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu {
        border-radius: var(--6px);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item:nth-last-child(-n+2)>ul.dropdown-menu {
        right: 0;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item.nav-item-last {
        margin-bottom: 0;
    }
    header#site-header .header-bottom ul.navbar-nav>li.nav-item>ul.dropdown-menu>li.nav-item a {
        padding: var(--9px) var(--16px) var(--8px) var(--16px);
    }

    /* #desktop dropdown */ 
    header#site-header .header-bottom .dropdown .dropdown-menu {
        top: 100%;
        background: rgb(var(--TA-background-gray-lightest));
        border: solid 1px rgb(var(--TA-border-gray-light));
        border-top: none;
        border-bottom: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    header#site-header .header-bottom .dropdown-menu.show {
        height: 0;
    }
    header#site-header .header-bottom .dropdown:hover .dropdown-menu,
    header#site-header .header-bottom .dropdown:has(:focus-visible) .dropdown-menu {
        height: auto;
    }
    header#site-header .header-bottom ul.navbar-nav li.nav-item>ul.dropdown-menu.show>li.nav-item.nav-item-last a,
    header#site-header .header-bottom ul.navbar-nav li.dropdown:hover ul.dropdown-menu>li.nav-item.nav-item-last a,
    header#site-header .header-bottom ul.navbar-nav li.dropdown:has(:focus-visible) ul.dropdown-menu>li.nav-item.nav-item-last a {
        border-bottom: solid 1px rgb(var(--TA-border-gray-light));
    }
    header#site-header .header-bottom ul.navbar-nav li.dropdown ul.dropdown-menu>li.nav-item a:focus-visible {
        box-shadow: inset 0 0 0 var(--4px) var(--TA-focusvisible-lighttheme);
    }
    header#site-header .header-bottom .dropdown .dropdown-menu li a:hover  {
        background: rgb(var(--TA-background-gray-hover));
    }


    /* main */
    main {
        margin-top: 137px;
    }

    /* site-footer */
    footer#site-footer .footer-top ul {
        padding-right: var(--16px);
    }
    footer#site-footer .footer-bottom .fobot-copy {
        justify-content: start;
    }
    footer#site-footer .footer-bottom .fobot-nav {
        padding: 0;
        justify-content: end;
    }

    
    /* Navbar Firefox/Safari Fix (Bootstrap override) */
    .ua-ff #header-navbar,
    .ua-ios #header-navbar {
        display: flex !important;
        max-height: initial !important;
        overflow: initial !important;
        /* height: initial !important; */
    }
    .ua-ios header#site-header .header-bottom .dropdown-menu.show,
    .ua-ios header#site-header .header-bottom .dropdown-menu.show {
        max-height: 0;
    }
    .ua-ff header#site-header .header-bottom .dropdown:hover .dropdown-menu,
    .ua-ios header#site-header .header-bottom .dropdown:hover .dropdown-menu,
    .ua-ff header#site-header .header-bottom .dropdown:has(:focus-visible) .dropdown-menu,
    .ua-ios header#site-header .header-bottom .dropdown:has(:focus-visible) .dropdown-menu {
        max-height: var(--WA-max-height);
    }

    /* Section: Frontpage Slider */
    #frontpage-slider .slider-track .slide {
        min-height: 430px;
    }
    #frontpage-slider .slider-track .slide .bg-image {
        background-position: top var(--xl-top) var(--xl-left);
        background-image: var(--bg-lg);
    }
    #frontpage-slider .slider-track .slide .content {
        justify-content: start;
        padding-top: 50px;
    }
    #frontpage-slider .slider-track .slide .content p.h2 {
        line-height: var(--46px);
        margin-top: 35px;
    }
    #frontpage-slider .slider-track .slide .content span {
        margin-top: 20px;
    }
    #frontpage-slider .slider-track .slide .content a {
        margin-top: 40px;
    }
    #frontpage-slider .slider-track .slide:nth-child(odd) .content {
        align-items: start;
    }
    #frontpage-slider .slider-track .slide:nth-child(even) .content {
        align-items: end;
    }
    #frontpage-slider .slider-track .slide .content p.h2 {
        font-size: var(--34px);
        font-weight: 800;
    }
    #frontpage-slider .slider-track .slide:nth-child(odd) .content p.h2 {
        text-align: left;
    }
    #frontpage-slider .slider-track .slide:nth-child(even) .content p.h2 {
        text-align: right;
    }

    /* Section: Frontpage Kurse */
    /* kurskategorien */
    #frontpage-kurse {
        padding: 20px 0 85px;
    }
    #frontpage-kurse .kurskategorien {
        gap:10px;
    }
    #frontpage-kurse .kurskategorien button.kurskategorie {
        padding: 10px 20px;
        font-size: var(--16px);
    }
    /* kurse */
    
    #frontpage-kurse .kurse-outer {
        background: none;
        overflow-x: auto;
    }
    #frontpage-kurse .kurse-outer::before {
        display: none;
    }
    #frontpage-kurse .kurse-inner {
        /*display: grid;
        grid-template-columns: repeat(3, 1fr);*/
        display: flex;
        flex-wrap: wrap;
        
        --gap:40px;
        gap: var(--gap);
        margin-top: 5px;
        padding: 15px 15px var(--gap);

        max-height: var(--cropheight);
        overflow-y: hidden;

        /*flex-wrap: initial;*/
        overflow-x: hidden;
        transition: max-height .4s ease;

        -webkit-overflow-scrolling: initial;
        overscroll-behavior-x: initial;
        scroll-snap-type: initial;
        scroll-behavior: initial;
    }
    #frontpage-kurse .kurse-inner.expanded {
        max-height: initial;
    }
    #frontpage-kurse .kurse-inner .frontpage-kurse-single {
        flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);

        display: flex;
        flex-direction: column;
        background: rgb(var(--TA-background-white));
        box-shadow: 0 0 15px 0 rgba(var(--TA-background-gray-dark),.5);
        border: none;
        padding: 20px;
        position:relative;

        /*transition: all 0.4s ease;*/
        transition: 
            opacity .4s ease,
            transform .4s ease,
            height .4s ease,
            width .4s ease,
            flex-basis .4s ease,
            flex .4s ease,
            margin .4s ease,
            padding .4s ease,
            border-width .4s ease;
        transition-behavior: allow-discrete;
        transform-origin: center;
        will-change: transform, opacity;

        /*flex: initial;*/
        scroll-snap-align: initial;
        margin-left: 0px;
        margin-right: 0px;
    }
    #frontpage-kurse .kurse-inner .frontpage-kurse-single .bookmark {
        right: 25px;
    }
    #frontpage-kurse .kurse-inner .frontpage-kurse-single .details .details-right button[data-tippy-content] {
        color: rgb(var(--TA-main-green-normal),1);
    }
    #frontpage-kurse .kurse-inner .frontpage-kurse-single .details .details-right button[data-tippy-content]:hover {
        color: rgb(var(--TA-main-green-normal),.75);
    }
    #frontpage-kurse .kurse-inner .frontpage-kurse-single:nth-child(1 of :not(.hidden)),
    #frontpage-kurse .kurse-inner .frontpage-kurse-single:nth-last-child(1 of :not(.hidden))  {
        margin-left: 0px;
        margin-right: 0px;
    }
    #frontpage-kurse .kurse-inner .frontpage-kurse-single.hidden {
        /*
        height: 0;
        width: 0;
        flex: 0 0 0;
        flex-basis: 0;
        padding: 0;
        opacity: 0;
        border-width: 0;
        transform: scale(0) translateX(100%) translateY(100%);
        */
        margin-right: -20px;
    }
    #frontpage-kurse .kurse-outer .empty-infotext {
        display: none;
        flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);

        flex-direction: column;
        background: rgb(var(--TA-background-white));
        box-shadow: 0 0 15px 0 rgba(var(--TA-background-gray-dark),.05);
        border: none;
        padding: 20px;
        position:relative;
    }
    #frontpage-kurse .kurse-outer:not(:has(.frontpage-kurse-single:not(.hidden))) .empty-infotext {
        display: flex;
    }
    #frontpage-kurse>footer .mobile {
        display: none;
    }
    #frontpage-kurse>footer .desktop {
        display:flex;
        justify-content: center;
    }
    #frontpage-kurse>footer .desktop .crop-toggler {
        background-color: rgb(var(--TA-main-blue-normal));
        color: rgb(var(--TA-linkcolor-white));
        padding: 5px 100px;
        font-size: var(--25px);
        line-height: var(--24px);
    }
    #frontpage-kurse>footer {
        position: relative;
        bottom: 0;
        transition: bottom .4s ease-in-out;
    }
    #frontpage-kurse>footer:has(.crop-toggler.active) {
        position: sticky;
        bottom: 30px;
    }
    #frontpage-kurse>footer .desktop .crop-toggler {
        font-size: var(--16px);
        font-weight:bold;
    }
    #frontpage-kurse>footer .desktop .crop-toggler.active {
        box-shadow: 0 0 15px 0 rgba(var(--TA-background-gray-dark), .5);
    }
    #frontpage-kurse>footer .desktop .crop-toggler.active:focus,
    #frontpage-kurse>footer .desktop .crop-toggler.active:focus-visible {
        box-shadow: 0 0 15px 0 rgba(var(--TA-background-gray-dark), .5), var(--focus-box-shadow);
    }
    #frontpage-kurse>footer .desktop .crop-toggler .showless,
    #frontpage-kurse>footer .desktop .crop-toggler.active .showmore {
        display: none;
    }
    #frontpage-kurse>footer .desktop .crop-toggler .showmore,
    #frontpage-kurse>footer .desktop .crop-toggler.active .showless {
        display: initial;
    }
    #frontpage-kurse>footer .desktop .crop-toggler.hidden {
        display: none;
    }
    
    /* Section: Frontpage Reviews */
    #frontpage-reviews .ReviewCarousel-container {
        margin: 0 auto;
    }
    #frontpage-reviews .ReviewCarousel {
        margin: 20px 49px;
        /*
        margin: revert;
        gap: revert;
        */
    }
    #frontpage-reviews .RC-item {
        flex: 0 0 20%;
        min-width: 20%;
        padding: 0;
    }
    #frontpage-reviews .RC-item-inner {
        height: 200px;
        max-height: initial;
    }
    #frontpage-reviews .RC-item p {
        font-size: var(--13px);
    }
    #frontpage-reviews .RC-nav {
        padding: 0 20.7%;
    }
    #frontpage-reviews .RC-nav button {
        padding: 6px 4px 6px 6px;
        font-size: var(--24px);
    }
    /* Section: Frontpage Imageboxes */
    #frontpage-imageboxes .imagebox-wrapper {
        margin-bottom: 0;
    }
    #frontpage-imageboxes .imagebox-inner {
        display: flex;
        flex-direction: column;
    }
    #frontpage-imageboxes .imagebox-inner {
        display: block;
    }
    #frontpage-imageboxes .imagebox-image-spacer {
        float: var(--float-dir);
        margin: 4px 0 5px 10px;
        width: 390px;
    }
    #frontpage-imageboxes .imagebox-wrapper:nth-of-type(even) .imagebox-image-spacer{
        margin: 4px 10px 5px 0;
    }
    /* Section: Frontpage dates kurse */
    #frontpage-dates-kurse .dates-kurse-listcontainer {
        padding: 20px 0 80px;
    }
    #frontpage-dates-kurse .dates-kurse-row {
        flex-direction: row;
    }
    #frontpage-dates-kurse .dates-kurse-start {
        flex-direction: column;
        padding: 5px 10px;
    }
    #frontpage-dates-kurse .dates-kurse-start .day {
        padding: 0;
    }
    #frontpage-dates-kurse .dates-kurse-start .month-long {
        display: none;
    }
    #frontpage-dates-kurse .dates-kurse-start .month-short {
        display: block;
        font-size: var(--22px);
    }
    #frontpage-dates-kurse .dates-kurse-center {
        flex: 1 1 100%;
        padding: 15px;
        flex-direction: column;
        justify-content: space-between;
    }
    #frontpage-dates-kurse .dates-kurse-center-start {
        flex: 0 1 100%;
        justify-content: space-between;
    }
    #frontpage-dates-kurse .dates-kurse-center-start .title {
        text-align: left;
        display: inline;
        width: auto;
    }
    #frontpage-dates-kurse .dates-kurse-center-start .details {
        justify-content: start;
        margin: 0;
        padding: 7px 0 0;
    }
    #frontpage-dates-kurse .dates-kurse-center-start .details::before {
        content: none;
    }
    #frontpage-dates-kurse .dates-kurse-center-end {
        flex-shrink: 0;
        margin: 0;
        flex-direction: row;
        gap: 20px;
        padding-top: 15px;
    }
    #frontpage-dates-kurse .dates-kurse-center-end .price-oldprice-container {
        justify-content: start;
        align-items: start;
        flex-wrap: initial;
        padding: 0;
    }
    #frontpage-dates-kurse .dates-kurse-center-end .price-baseline,
    #frontpage-dates-kurse .dates-kurse-center-end .price-taxline,
    #frontpage-dates-kurse .dates-kurse-center-end .price-perperson {
        padding: 0;
        margin: 0;
        font-size: var(--13px);
        line-height: var(--13px);
        gap: 0;
        flex-direction: column;
        align-items: end;
        justify-content: end;
        color: rgb(var(--TA-textcolor-gray-darker));
    }
    #frontpage-dates-kurse .dates-kurse-center-end .price-baseline > *:only-child,
    #frontpage-dates-kurse .dates-kurse-center-end .price-taxline > *:only-child {
        font-size: var(--16px);
        line-height: var(--16px);
        color: var(--bs-body-color);
    }
    #frontpage-dates-kurse .dates-kurse-center-end:has(:not(.price-brutto)) .price-perperson {
        line-height: var(--16px);
        flex-grow: 1;
    }
    #frontpage-dates-kurse .dates-kurse-center-end .price-baseline {order: 1;}
    #frontpage-dates-kurse .dates-kurse-center-end .price-taxline {order: 2;}
    #frontpage-dates-kurse .dates-kurse-center-end .price-oldprice-container {order: 3;}
    #frontpage-dates-kurse .dates-kurse-center-end .price-perperson {order: 4;}
    #frontpage-dates-kurse .dates-kurse-center-end .price-oldprice-container .price-r-percent-outer {
        flex: 1 1 auto;
        justify-content: start;
    }
    #frontpage-dates-kurse .dates-kurse-center-end .price,
    #frontpage-dates-kurse .dates-kurse-center-end .price-brutto {
        justify-content: end;
        gap: 5px;
        font-size: var(--16px);
        line-height: var(--16px);
        color: var(--bs-body-color);
    }
    #frontpage-dates-kurse .dates-kurse-center-end .price-value, 
    #frontpage-dates-kurse .dates-kurse-center-end .price-r-value {
        font-size: var(--23px);
        line-height: var(--23px);
        white-space: nowrap;
    }
    #frontpage-dates-kurse .dates-kurse-end {
        margin: 0;
        padding: 20px;
        flex-direction: column;
        flex-shrink: 0;
        justify-content: center;
        row-gap: 10px;
    }
    #frontpage-dates-kurse .dates-kurse-end::before {
        content: '';
        position: absolute;
        left: 0;
        background-color: rgb(var(--TA-background-gray-medium));
        top: 15%;
        height: 70%;
        width: 1px;
    }
    #frontpage-dates-kurse .dates-kurse-end button.tooltip-btn[data-tippy-content] {
        padding: 0;
        align-self: center;
        color: rgb(var(--TA-main-green-normal),1);
    }
    #frontpage-dates-kurse .dates-kurse-end button[data-tippy-content]:hover {
        color: rgb(var(--TA-main-green-normal),.75);
    }
    #frontpage-dates-kurse .dates-kurse-end a {
        font-size: var(--35px);
        line-height: var(--34px);
        background-color: transparent;
        padding: 0;
    }
    #frontpage-dates-kurse .dates-kurse-end a .link-label-mob {
        display: none;
    }
    #frontpage-dates-kurse .dates-kurse-end a .link-label-lg {
        display: inline;
    }
    /*
    #frontpage-dates-kurse .dates-kurse-center-start {
        flex-direction: row; 
    }
    #frontpage-dates-kurse .dates-kurse-start {
        width: 120px;
    }
    #frontpage-dates-kurse .dates-kurse-center {
        padding: 0px 30px;
    }*/
    #stoerer {
        padding: 40px 0;
    }
    #stoerer .stoerer-details .bg-icon.bg-technikon {
        font-size: 180px;
        bottom: -20px;
        right: 25px;
    }
    #stoerer .stoerer-search .bg-icon.bg-search {
        font-size: 170px;
        bottom: -37px;
        right: -16px;
    }

    /* page-kurskategorie */
    #page-kurskategorie .page-layout {
        gap: 2rem;
        grid-template-columns: 300px 1fr;
        grid-template-areas: "end start";
        align-items: start;
    }
    #page-kurskategorie .page-layout #kurskategorie-aside { 
        position: sticky;
        top: 157px;
        max-height: calc(100vh - 138px - 20px);
        display: flex;
        flex-direction: column;
    }    
    #page-kurskategorie .page-layout #kurskategorie-aside ul { 
        overflow: auto;
    }
    #page-kurskategorie .page-layout #kurskategorie-aside ul li { }
    #page-kurskategorie .page-layout #kurskategorie-aside ul li ul {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    #page-kurskategorie .page-layout #kurskategorie-aside ul li ul li { }
    #page-kurskategorie #kurskategorie-textcontent {
        padding: 30px 0 0;
        margin: 0;
    }
    /* SECTION kurskategorie-kurse */
    #kurskategorie-kurse {
        padding: 20px 0 50px;
    }
    #kurskategorie-kurse .summary {
        display:block;
    }
    #kurskategorie-kurse .filters {
        display: flex;
        justify-content: end;
        flex-wrap: wrap;
    }
    #kurskategorie-kurse .filters>* {
        flex: 1 1;
    }
    #kurskategorie-kurse .filters>*:first-child {
        flex: 1 1;
    }
    #kurskategorie-kurse .filters .page-info {
        text-align: left;
        display: flex;
        align-items: center;
    }
    
    #kurskategorie-kurse header .page-info,
    #kurskategorie-kurse header .pagination,
    #kurskategorie-kurse footer .filters .filterLimit,
    #kurskategorie-kurse footer .filters .filterSort {
        display: block;
    }
    #kurskategorie-kurse .kurskategorie-kurse-single .title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        min-height: 2lh;
    }
    #kurskategorie-kurse .kurskategorie-kurse-single .details {
        gap: 15px;
        flex-wrap: wrap;
    }
    #kurskategorie-kurse .kurskategorie-kurse-single .details .details-left {
        order: 2;
    }
    #kurskategorie-kurse .kurskategorie-kurse-single .details .details-center {
        order: 1;
        flex: 1 0 100%;
        padding: 0 35px 0 0;
    }
    #kurskategorie-kurse .kurskategorie-kurse-single .details .details-right {
        order: 3;
    }
    
    /* Section: Kurskategorie Imageboxes */
    #kurskategorie-imageboxes {
        padding-top: 50px;
        margin: 0;
    }
    #kurskategorie-imageboxes .maincontent {
        display:flex;
    }
    #kurskategorie-imageboxes .imagebox-inner {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    #kurskategorie-imageboxes .imagebox-inner {
        display: block;
    }
    #kurskategorie-imageboxes .imagebox-image-spacer {
        float: left;
        margin: 4px 0 5px 10px;
        width: 390px;
    }
    #kurskategorie-imageboxes .imagebox-wrapper:nth-of-type(even) .imagebox-image-spacer{
        margin: 4px 10px 5px 0;
    }
    
    /* Page: Einfache Seite */
    #page-einfache-seite #titleimg img {
        height: 300px;
        width: 100%;
        object-position: var(--offsetTop) left 50%;
    }
    #page-einfache-seite #maincontent .page-layout {
        margin-bottom: 20px;
    }
    #page-einfache-seite #maincontent .page-layout:has(.linkbuttons) {
        grid-template-areas: 
        "title title"
        "content linkbuttons";
        grid-template-columns: 1fr 400px;
        gap:40px;
    }
    #page-einfache-seite #maincontent .bg-icon::after {
        top: unset;
        bottom: -10%;
        left: 50%;
        font-size: 3500%;
    }
    #page-einfache-seite #maincontent .content img {
        object-fit: cover;
        max-width: 100%;
    }
    
}
@media (min-width: 75rem) { /* 1200px */
    #frontpage-slider .slider-track .slide .bg-image {
        background-image: var(--bg-xl);
    }
}
@media (min-width: 87.5rem) { /* 1400px */
    #frontpage-slider .slider-track .slide .bg-image {
        background-image: var(--bg-xxl);
    }
}

/* =======================================
   Misc
   ======================================= */

@media (max-width: 1600px) {
    #dekrasiegel {
    height: 148px;
    filter: drop-shadow(0 0 2px #333);
    left: 20px;
    }

    #dekrasiegel img {
        height: 148px;
        opacity: .5;
    }

}
@media (max-width: 1440px) {
    #dekrasiegel {
    height: 91px;
    filter: drop-shadow(0 0 2px #333);
    }

    #dekrasiegel img {
        height: 91px;
        opacity: .75;
    }
}

@media (max-width: 991px) {
    #dekrasiegel {
    height: 91px;
    }

    #dekrasiegel img {
    height: 91px;
    }
}

@media (max-width: 767px) {
    #dekrasiegel {
    height: 71px;
    left: 20px;
    }

    #dekrasiegel img {
    height: 71px;
    }
}