/*
 Theme Name:   Knowledge Hub Template Child
 Description:  Child Theme for Knowledge Hub Template
 Author:       Teejit
 Author URI:   httpw://www.teejit.de
 Template:     knowledge-hub-template
 Version:      1.0.2
 Last Update: 2025-05-11 10-55
 Text Domain:  wp_tj_knowhub_template-child
*/


/* teejit loading logo  */
.lds-dual-ring,
.lds-dual-ring:after {
    box-sizing: border-box;
}
.lds-dual-ring {
    display: block !important;
    width: 50px;
    height: 43px !important;
    background-image: url(https://digitalzentrum-tourismus.de/wp-content/uploads/2023/08/Icon-Hiker-Animated-Small-Flipped.gif);
}
.lds-dual-ring:after, .rotating-group {
    display:none !important;
}
.teejit-loading-2 {
    animation: teejit-loading-2 4s linear infinite;
}
.t-loading {
    fill: var(--primary-background);
}


/* root */
:root {
    --gap-small: 8px;
    --gap-medium: 12px;
    --gap-large: 24px;
    --sidebar-nav-width: 250px;
    --text-color: #100F0F;
    --teejit--accent--gray: #F3FDFF;
    --primary-background: #FEBC59; /*#e10019;*/
    --primary-color:#100F0F;
    --primary-background-hover: #FEBC59; /* if not set --primary-color */
    --primary-color-hover: #100F0F; /* if not set --primary-background */
    --primary-padding:8px 16px;
    --secondary-background:#407d8a;
    --secondary-color: #fff;
    --secondary-background-hover:#407d8a; /* if not set --secondary-color */
    --secondary-color-hover: #ecf0f1; /* if not set --secondary-background */
    --accordion-background: #81C4E9; /* if not set --secondary-background */
    --accordion-color: #100F0F; /* if not set --secondary-color */
    --overlay-white-07:rgba(255, 255, 255, 0.7);
    --overlay-white-02:rgba(255, 255, 255, 0.2);
    --header-nav-bar-background: #ffffff;
    --teejit-success: #27ae60;
    --teejit-error: #c0392b;
    --process-background-done: #27ae60;
    --process-background-undone: #7f8c8d;
    --tag-label-background: #e4e4e4;
    --tag-label-color: #100F0F;
    --tag-label-border-color: #e4e4e4;
    --tag-categroy-background: #fff;
    --tag-categroy-color: #100F0F;
    --tag-categroy-border-color: #FEBC59;
    --tag-audience-background: #fff;
    --tag-audience-color: #100F0F;
    --tag-audience-border-color: #e4e4e4;
    --teejit-tag-border-radius: 3px; /*könnte das gleich sein wie --teejit-btn-border-radius-small*/
    --teejit-box-shadow-1: 0px 1px 4px 0px rgba(0,0,0,0.2),
    0px 1px 4px 0px rgba(0,0,0,0.14),
    0px 2px 1px -1px rgba(0,0,0,0.12);
    --teejit-box-shadow-1-hover: 0px 0px 7px 0.8px rgba(0,0,0,0.6);
    --teejit-box-shadow-2:0 0 2px 0 rgba(0,0,0,.2); /*use for messages like login error*/
    --teejit-btn-inner-element-padding:16px 16px 0;
    --teejit-btn-inner-element-padding-bottom:16px;
    --teejit-padding-xxl:24px;
    --teejit-padding-xl:20px;
    --teejit-padding-l:16px;
    --teejit-padding-m:12px;
    --teejit-padding-s:8px;
    --teejit-padding-xs:4px;
    --font-size-p: 16px;
    --font-size-p-small:14px;
    --font-size-p-xsmall:12px;
    --font-size-h1: 24px;
    --font-weight-h1: ;
    --font-size-h2: 20px;
    --font-weight-h2: bold;
    --font-size-h3: 20px;
    --font-weight-h3: ;
    --teejit-btn-h1:16px;
    --teejit-btn-p:14px;
    --teejit-btn-span-medium: 12px;
    --teejit-btn-span-small: 10px;
    --teejit-btn-border-radius-medium: 3px;
    --teejit-btn-border-radius-small: 3px;
    --teejit-form-border: #e9e9e9;
    --teejit-input-border: #e9e9e9;
}

body {
    font-family: Open sans, sans-serif;
}
h1 {
    color: #407D8A;
    font-family: "Open Sans", Sans-serif;
    font-size: 48px;
    font-weight: 700;
    font-style: italic;
    text-transform: none;
}
h2 {
    color: #407D8A;
    font-family: "Open Sans", Sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-text-stroke-width: 0px;
    stroke-width: 0px;
    -webkit-text-stroke-color: #000;
    stroke: #000;
    font-style: italic;
}
h4 {
    color: #407D8A;
    margin: 8px 0;
    font-size: 24px;
    font-weight: bold;
}
em {
    font-weight:normal;
}
.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: 10px;
}
.iframe-mat-col iframe {
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
}
.elementor-divider {
    padding-top: 15px;
    padding-bottom: 15px;
    margin:25px 0px;
}
.elementor-divider-separator {
    border-top: 1px solid #d3e9c8;
    width: 100%;
}
.mdzt-header {
    display: flex
;
    margin: 0 auto;
    max-width: 1050px;
    padding: var(--teejit-padding-l);
    width: 95%;

}
.mdzt-header {
    display: flex;
    align-items: center;
}

.mdzt-left {
    flex: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.mdzt-left h1 {
    margin: 0;

}
.mdzt-left-h1 {
    border-bottom: 2px solid #81C4E9; /* Farbe nach Bedarf anpassen */
    padding-top: 8px;
    flex:1;
    width:90%;
}

.mdzt-right {
    flex: 1;
}

.mdzt-right img {
    width: 100%;
    height: auto;
    display: block;
}

.btn:hover, .t-btn:hover {
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.20) inset !important;
    cursor: pointer !important;
    transition: all 0.5s ease;
}
.btn-primary {
    font-size: 16px;
    font-weight: 600;
    fill: #100F0F;
    color: #100F0F;
    background-color: #FEBC59;
    border-radius: 12px 0px 12px 12px;
    padding: 15px 15px 15px 15px;
    background-image: url(https://lernplattform.digitalzentrum-tourismus.de/wp-content/uploads/2025/06/Rectangle-29.png);
    background-repeat: no-repeat;
    background-position: 17px 13px;
    padding-left: 60px;
    justify-content: right;
    height: 50px;
    align-items: center;
}
.btn-secondary {
    font-size: 16px;
    font-weight: 600;
    fill: #100F0F;
    background-color: #407d8a;
    color: #ffffff;
    border-radius: 12px 0px 12px 12px;
    padding: 15px 15px 15px 15px;
}
.t-btn-dir-cta .t-btn-primary {
    min-height: 47px;
    align-items: center;
}


footer{
    background:unset;
}
footer .wrapper {
    width:100%;
    padding:0;
    max-width: unset;
}

.footer-line-one {
    padding-bottom:0 !important;
}
.footer-line-one, .footer-line-nav {
    background: #81C4E9;
    padding: 20px 0;
    margin:0;
}
.footer-copyright {
    background: #FEBC59;
}
.foo-4-main-inner {
    width:90%;
    display: flex;
    gap: 10%;
}
.foo-4-inner-col-1 {
    flex:1;
    max-width:40%;
}
.foo-4-inner-col-1 img {
    max-height:200px;
}
.foo-4-inner-col-2 {
    flex:3;
}

.header-nav-link-wrap {
    flex-direction: row;
    display: flex
;
    gap: 30px;
}
#header-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    align-items: center;
    display: flex
;
}

#header-nav {
    max-width: 1200px;
    margin: 0 auto;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 15px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.3s;
}

#menu-header-freie-kurse {
    list-style: none;
    display: flex;
    padding:0;
    margin:0;
}

#menu-header-freie-kurse .menu-item {
    position: relative;
    background-color: var(--primary-background);
    border-radius: 12px 0px 12px 12px;
}

#menu-header-freie-kurse .menu-item > a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 15px 15px 15px;
    transition: background-color 0.3s;
}

#menu-header-freie-kurse .menu-item > a:hover {
    background-color: var(--secondary-background);
}
#menu-header-freie-kurse .menu-item:hover {
    border-radius: 12px 0px 0px 0px;
    background-color: var(--secondary-background);
}

#menu-header-freie-kurse .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 0;
    margin:0;
    background-color: var(--primary-background);
    min-width: 300px;
    list-style: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#menu-header-freie-kurse .sub-menu: .menu-item {
    border-radius: 0;
}
#menu-header-freie-kurse .sub-menu:hover .menu-item {
    border-radius: 0;
}
#menu-header-freie-kurse .menu-item:hover .sub-menu {
    display: block;
}

#menu-header-freie-kurse .sub-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#menu-header-freie-kurse .sub-menu li:last-child {
    border-bottom: none;
}

#menu-header-freie-kurse .sub-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    transition: background-color 0.3s;
}

#menu-header-freie-kurse .sub-menu a:hover {
    background-color: var(--secondary-background);
}
#menu-header-freie-kurse .sub-menu .menu-item > a {
    border-radius: 0;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .header-logo-wrap {
        justify-content: center;
        display: flex
    ;
    }
    .header .wrapper, .mdzt-header {
        flex-direction: column;
    }
    .header-nav-link-wrap {
        justify-content: center;
    }
    #header-navbar {
        background-color: #2c3e50;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .menu-toggle {
        display: block;
        background-color: var(--primary-background);
    }

    #menu-header-freie-kurse {
        display: none;
        flex-direction: column;
        width: 100%;
        position: fixed;
        left: 0;
    }

    #menu-header-freie-kurse.active {
        display: flex;
    }

    #menu-header-freie-kurse .menu-item {
        width: 100%;
        border-radius: 0;
    }

    #menu-header-freie-kurse .menu-item > a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    #menu-header-freie-kurse .sub-menu {
        position: static;
        display: none;
        width: 100%;
        box-shadow: none;
    }

    #menu-header-freie-kurse .menu-item.active .sub-menu {
        display: block;
    }

    #menu-header-freie-kurse .sub-menu a {
        padding-left: 40px;
        font-size: 14px;
    }

    #menu-header-freie-kurse .menu-item-has-children > a::after {
        content: ' ▼';
        font-size: 12px;
    }

    #menu-header-freie-kurse .menu-item-has-children.active > a::after {
        content: ' ▲';
    }
}