/*
 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
*/

@font-face {
    font-family: 'Graebenbach';
    font-style: normal;
    font-weight: 400;
    src: local('Graebenbach'), url('/wp-content/themes/knowledge-hub-template-child/src/fonts/GraebenbachOE/GraebenbachOE-Regular.otf') format('opentype');
}
@font-face {
    font-family: 'GraebenbachBold';
    font-style: normal;
    font-weight: 700;
    src: local('GraebenbachBold'), url('/wp-content/themes/knowledge-hub-template-child/src/fonts/GraebenbachOE/GraebenbachOE-Bold.otf') format('opentype');
}
@font-face {
    font-family: 'GraebenbachItalic';
    font-style: italic;
    font-weight: 400;
    src: local('GraebenbachItalic'), url('/wp-content/themes/knowledge-hub-template-child/src/fonts/GraebenbachOE/GraebenbachOE-Regularitalic.otf') format('opentype');
}
body {
    font-family: 'Graebenbach', 'Roboto', sans-serif;
}


/* fall back if not defined in src/style.css */
.t-login-form-loading {
    background-color: rgba(255, 255, 255, 0.9);
    display: none !important;
    height: calc(100% - var(--teejit-padding-xl) * 2);
    position: absolute;
    width: calc(100% - var(--teejit-padding-xl) * 2);
    justify-content: center;
    align-items: center;
}

/* teejit loading logo  */
.lds-dual-ring,
.lds-dual-ring:after {
    box-sizing: border-box;
}
.lds-dual-ring {
    display: block !important;
    width: 50px;
    height: 50px;
}
.rotating-group {
    animation: teejit-loading 4s linear infinite;
    transform-origin: 218.4px 213.38px; /* Mittelpunkt des viewBox */
    fill: var(--primary-background);
}
.teejit-loading-2 {
    animation: teejit-loading-2 4s linear infinite;
}
.t-loading {
    fill: var(--primary-background);
}
@keyframes teejit-loading {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes teejit-loading-2 {
    from { transform: rotate(360deg); }
    to { transform: rotate(-360deg); }
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.center-login-button {
    flex-direction: column;
	align-items: center;
}
.center-login-button p {
    text-align: center;
}
.center-login-button a {
    justify-content: center;
    display: flex;
}
.website-link-btn:has(img) {
    background: none;
    border: unset;
    height:60px;
    padding: 0px;
}
.website-link-btn:has(img):hover {
    background: none;
    border: unset;
}
/* root */
:root {
    --gap-small: 8px;
    --gap-medium: 12px;
    --gap-large: 24px;
    --sidebar-nav-width: 250px;
    --text-color: #3c3c3c;
    --teejit--accent--gray: #f0f0f0;
    --primary-background: #007a31; /*#e10019;*/
    --primary-color:#fff;
    --primary-background-hover: #007a31; /* if not set --primary-color */
    --primary-color-hover: #fff; /* if not set --primary-background */
    --primary-padding:0.8em 1.3em;

    --secondary-background:#3C3C3C;
    --secondary-color: #fff;
    --secondary-background-hover:#3C3C3C; /* if not set --secondary-color */
    --secondary-color-hover: #fff; /* if not set --secondary-background */

    --accordion-background:#f0f0f0; /* if not set --secondary-background */
    --accordion-color: #3C3C3C; /* 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: #007a31;
    --process-background-undone: #6d6d6d;
    --tag-label-background: #fff;
    --tag-label-color: #3C3C3C;
    --tag-label-border-color: #6d6d6d;
    --tag-categroy-background: #fff;
    --tag-categroy-color: #3C3C3C;
    --tag-categroy-border-color: #007a31;
    --tag-audience-background: #fff;
    --tag-audience-color: #3C3C3C;
    --tag-audience-border-color: #6d6d6d;
    --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: #6d6d6d;
    --teejit-input-border: #6d6d6d;

    --projectColor: #007a31;
    --naviTextHoverColor: #007a31;
    --naviTextColor: #007a31;
    --naviIconColor: #007a31;
    --linkHoverBackgroundColor: #007a31;
    --linkHoverFontColor: #fff;
    --buttonBackgroundColor: #3c3c3c;
    --buttonFontColor: #fff;
    --buttonHoverBackgroundColor: #6d6d6d;
    --buttonHoverFontColor: #fff;
    --fliessTextLinkColor: #007a31;
    --projectTextColor: #fff;
    --bookNowBtnBackground: #007a31;
    --bookNowBtnColor: #fff;
    --gbWsFont: "GraebenbachBold", Arial, sans-serif;

    --mainColor: #3c3c3c;
    --backgroundColor: #3c3c3c;
}
#newWAfooter div.background {
    background: #3c3c3c;
    color: #fff;
}
@media (min-width: 1170px) {
    #newWAfooter .specialFooterLine li a {
        font-size: 20px;
        color: #f0f0f0;
    }
}
#newWAfooter div.background a {
    color: #fff;
}
.footer-line {
    margin:0px;
}

#t-kh-home-search {
    order:1;
}
.t-kh-home-flag-navigation {
    order: 2;
}
.t-kh-home-row {
    order: 3;
}



.buttonUI,
a.ttgColoredButton,
.ttgColoredButton,
a:has(.btn),
#teejit-login-submit,
button.btn {
    font-size: 16px;
    position: relative;
    border: 2px solid #3c3c3c;
    font-weight: 600;
    border-radius: 35px;
    background-color: transparent;
    color: #3c3c3c;
    width: fit-content;
    letter-spacing: .3px;
    transition: ease-in-out .2s;
    text-decoration: none !important;
    display: inline-block;
    padding: .7em 1.3em .7em 3.2em;
}

/* Font Awesome Icon - Initial State */
.buttonUI:before,
a.ttgColoredButton:before,
.ttgColoredButton:before,
a:has(.btn):not(.website-link-btn):before,
#teejit-login-submit:before,
button.btn:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900; /* Wichtig für solid icons */
    content: "\f061";
    font-size: 15px;
    position: absolute;
    left: calc(1rem + 10px);
    top: calc(50% - 7.5px); /* Korrigiert für bessere Zentrierung */
    background: transparent;
}

/* Hover States */
.buttonUI:hover,
.buttonUI:focus,
.buttonUI:active,
a.ttgColoredButton:hover,
a.ttgColoredButton:focus,
a.ttgColoredButton:active,
.ttgColoredButton:hover,
.ttgColoredButton:focus,
.ttgColoredButton:active,
a:hover:has(.btn),
#teejit-login-submit:hover,
#teejit-login-submit:focus,
#teejit-login-submit:active,
button.btn:hover,
button.btn:focus,
button.btn:active {
    padding: .7em 3.2em .7em 1.3em;
    background-color: transparent;
    color: var(--text-color);
    border: 2px solid #3c3c3c;
    border-radius: 35px;
}

/* Hover State - Icon Background Circle */
.buttonUI:hover:before,
.buttonUI:focus:before,
.buttonUI:active:before,
a.ttgColoredButton:hover:before,
a.ttgColoredButton:focus:before,
a.ttgColoredButton:active:before,
.ttgColoredButton:hover:before,
.ttgColoredButton:focus:before,
.ttgColoredButton:active:before,
a:hover:has(.btn):not(.website-link-btn):before,
#teejit-login-submit:hover:before,
#teejit-login-submit:focus:before,
#teejit-login-submit:active:before,
button.btn:hover:before,
button.btn:focus:before,
button.btn:active:before {
    content: "";
    font-size: inherit;
    right: .5em;
    left: auto;
    top: calc(50% - 1em);
    width: 2em;
    height: 2em;
    padding: 0;
    border-radius: 50%;
    background-color: var(--primary-background);
}

/* After Element für Arrow auf Hover */
.buttonUI:hover:after,
.buttonUI:focus:after,
.buttonUI:active:after,
a.ttgColoredButton:hover:after,
a.ttgColoredButton:focus:after,
a.ttgColoredButton:active:after,
.ttgColoredButton:hover:after,
.ttgColoredButton:focus:after,
.ttgColoredButton:active:after,
a:hover:has(.btn):not(.website-link-btn):after,
#teejit-login-submit:hover:after,
#teejit-login-submit:focus:after,
#teejit-login-submit:active:after,
button.btn:hover:after,
button.btn:focus:after,
button.btn:active:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f061";
    font-size: .8em;
    color: white;
    position: absolute;
    top: 0;
    right: .25em;
    width: 3.2em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease-in-out .2s;
    animation: movingarrow .25s ease-out;
}


/* Animation */
@keyframes movingarrow {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
a .btn:not(.website-link-btn) {
    background-color: unset;
    padding: 0px;
    border: unset;
    color: var(--text-color);
}
a .btn:not(.website-link-btn):hover {
    background-color: unset;
    padding: 0px;
    border: unset;
    color: var(--text-color);
}

.header-website-link-wrap a {
    border:unset;
    padding: 0px;
}
.header-website-link-wrap a:before, .header-website-link-wrap a:after {
    content: none !important;
    display: none !important;
}
.header-website-link-wrap a:hover {
    padding:0px;
}
.t-profile-element:has(.btn) {
    border:none
}
.t-profile-element .btn .material-icons {
    display:none
}
.header-website-link-wrap a:hover {
border:unset !important;
}

@media (min-width: 768px) {
	
#newWAfooter .specialFooterLine li {
	border: unset;
}
}


/*** Teaser Slider ***/
.front-page-slider div, .front-page-slider {
    display:block !important;
}
.slider-container.front-page-slider, .video-slider.front-page-slider {
    width:80%;
    margin:10px auto;
	max-width: 1130px;
}
.slick-list {
    /*height: 300px;*/
}
.slick-prev, .slick-next {
    height:50px;
    width: 50px;
	z-index: 999;
}

@media all and (max-width: 750px) {}
	.slick-prev {
    left: -50px;
}
	.slick-next {
    right: -50px;
}

.slick-prev:before, .slick-next:before {
    color: var(--primary-background);
    font-size: 40px;
}
.gallery-item {
	width: 200px;	
}
.gallery-item img,.gallery-item video, .video-player {
    max-width: 100%;
    aspect-ratio: 9/16; /* Hochkant Format */
    object-fit: cover;
    max-height: 356px;
}
.gallery-item a {
	width: 100%;
}
.gallery-item .btn {
	text-align: center;
}
.video-player {
    cursor: pointer;
}
.slick-track {
	margin-left:0;
	margin-right:0
}
/* Zentrierung des Videos im Vollbildmodus */
video:fullscreen {
    width: 100vw;
    height: 100vh;
    object-fit: contain; /* Behält Seitenverhältnis bei */
    object-position: center;
}

/* Für Webkit-basierte Browser */
video:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    object-position: center;
}

/* Alternative: Flexbox für Zentrierung */
video:fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
}