/*
 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.1
 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;
}
.header-website-link-wrap a:hover {
    border: unset !important;
}
main {
    /*margin-top: 90px !important;*/
}
/* 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);
    }
}

.content-detail-teams {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-medium);
}

.front-page .btn-primary, .front-page .t-btn-primary {
    color: var(--primary-color) !important;
}

.front-page .btn-primary:hover, .front-page .t-btn-primary:hover {
    color: var(--primary-color-hover) !important;
}


#header-logo-img {
    height: 140px !important;
}
#t-nav-left {
    padding-top: 40px;
}

@media (min-width: 992px) {
    #header #headerLogo a img {
        margin-top: -18px;
        max-height: 140px;
    }
}

@media (min-width: 1170px) {
    #header #headerLogo img {
        max-width: 100%;
        margin: 5px 0;
        max-height: 80px;
        transition: max-height .3s ease-in-out;
    }
}

@media (max-width: 991px) {
    #header #headerLogo a img {
        margin-top: -10px;
        max-height: 90px;
    }
}
@media (max-width: 1169px) {
    #header #headerLogo img {
        max-width: 250px;
        margin: 5px 15px 0 30px;
        max-height: 50px;
    }
}

.header-fixed {
    position: fixed;
    height: 90px;
    transition: height .3s ease-in-out;
    background: #fff;
    -webkit-box-shadow: 0 4px 4px -4px #666;
    box-shadow: 0 4px 4px -4px #666;align-content
}
@media (min-width: 1170px) {
    #header .header-fixed {
        position: fixed;
        height: 90px;
        transition: height .3s ease-in-out;
        background: #fff;
        -webkit-box-shadow: 0 4px 4px -4px #666;
        box-shadow: 0 4px 4px -4px #666;
    }
}
#header-logo {
    margin-top: -18px;
}
@media (max-width: 1169px) {
    #header #headerLogo {
        position: absolute;
        z-index: 1025;
        height: 60px;
        background: #fff;
        -webkit-box-shadow: 0 4px 4px -4px #666;
        box-shadow: 0 4px 4px -4px #666;
    }
}

/* Footer */

footer {
    background: #3c3c3c;
    color: #fff;
}

/* Root */
:root {
    --gap-small: 8px;
    --gap-medium: 12px;
    --gap-large: 24px;
    --sidebar-nav-width: 250px;
    --text-color: #3c3c3c;
    --teejit--accent--gray: #f0f0f0;
    --primary-background: #f51919;
    --primary-color: #fff;
    --primary-background-hover: #fff;
    --primary-color-hover: #f51919;
    --primary-padding: 8px 16px;
    --secondary-background: #ecf0f1;
    --secondary-color: #3c3c3c;
    --secondary-background-hover: #3c3c3c;
    --secondary-color-hover: #f0f0f0;
    --accordion-background: #f0f0f0;
    --accordion-color: #3c3c3c;
    --overlay-white-07: hsla(0, 0%, 100%, .7);
    --overlay-white-02: hsla(0, 0%, 100%, .2);
    --header-nav-bar-background: #fff;
    --teejit-success: #27ae60;
    --teejit-error: #c0392b;
    --process-background-done: #27ae60;
    --process-background-undone: #7f8c8d;
    --tag-label-background: #e4e4e4;
    --tag-label-color: #333;
    --tag-label-border-color: #e4e4e4;
    --tag-categroy-background: #fff;
    --tag-categroy-color: #333;
    --tag-categroy-border-color: #3698db;
    --tag-audience-background: #fff;
    --tag-audience-color: #333;
    --tag-audience-border-color: #e4e4e4;
    --teejit-tag-border-radius: 3px;
    --teejit-box-shadow-1: 0px 1px 4px 0px rgba(0, 0, 0, .2), 0px 1px 4px 0px rgba(0, 0, 0, .14), 0px 2px 1px -1px rgba(0, 0, 0, .12);
    --teejit-box-shadow-1-hover: 0px 0px 7px 0.8px rgba(0, 0, 0, .6);
    --teejit-box-shadow-2: 0 0 2px 0 rgba(0, 0, 0, .2);
    --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;
}

.t-kh-short-section > section {
    flex: 1;
    flex-direction: column;
}
#t-main {
    margin-top: 2px !important;
}

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


#t-kh-short-section .t-button-directory {
    flex: none;
}

/* Container für die beiden Sektionen */
.sections-container {
    display: flex;
    gap: 15px; /* Abstand zwischen den Karten */
    padding: 20px;
    max-width: 1500px;
    margin: auto;
    height: 400px;
    width: 100%;
}

/* Stil für jede einzelne Karte */
.info-card {
    flex: 1; /* Beide Karten nehmen gleich viel Platz ein */
    position: relative; /* Wichtig für die Positionierung des Overlays und des Inhalts */
    border-radius: 12px;
    height: 100%;
    overflow: hidden; /* Stellt sicher, dass alles innerhalb der abgerundeten Ecken bleibt */
    color: white;
    text-decoration: none; /* Entfernt die Unterstreichung vom Link */

    /* Flexbox, um den Inhalt unten zu positionieren */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.info-card-background {
    flex: 1; /* Beide Karten nehmen gleich viel Platz ein */
    position: absolute; /* Wichtig für die Positionierung des Overlays und des Inhalts */
    height: 100%;
    width:100%;
    color: white;

    /* Flexbox, um den Inhalt unten zu positionieren */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /* Hintergrundbild-Konfiguration */
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease; /* Leichte Animation beim Hover */
}

.info-card:hover > .info-card-background {
    transform: scale(1.2); /* Vergrößert die Karte leicht beim Darüberfahren */
}

/* Dunkler Farbverlauf über den Bildern für bessere Lesbarkeit des Textes */
.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: 1;
    border-radius: 12px;
}

/* Spezifische Hintergrundbilder für Desktop */
.card-urlaub .info-card-background {
    background-image: url('https://elearning.oberoesterreich-tourismus.at/wp-content/uploads/2025/06/buchung.png');
}

.card-business .info-card-background {
    background-image: url('https://elearning.oberoesterreich-tourismus.at/wp-content/uploads/2025/06/google.png');
}

/* Inhalt (Text) der Karte */
.card-content {
    position: relative; /* Über dem Farbverlauf */
    z-index: 2;
    text-align: center;
    padding: 30px;
    color:white;
    flex-direction: column;
}

.card-content h2 {
    font-family: var(--gbWsFont);
    font-size: 25px;
    margin-bottom: 5px;
    margin-top: 15px;
}

.card-content p {
    margin: 0;
    opacity: 0.9;
}

/* -- Spezifische Elemente für die mobile Ansicht -- */

/* Pfeil-Icon */
.arrow-icon {
    display: none; /* Standardmäßig auf Desktop ausgeblendet */
    width: 35px;
    height: 35px;
    border: 2px solid white;
    border-radius: 50%;
    margin: 0 auto 15px auto; /* Zentriert das Icon */

    /* Zentriert den Pfeil im Kreis */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1; /* Korrigiert vertikale Ausrichtung */
}

/* Copyright-Symbol */
.copyright-icon {
    display: none; /* Standardmäßig auf Desktop ausgeblendet */
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 2;
    font-size: 0.9rem;
}

/* Zeilenumbruch nur für Mobile */
.mobile-br {
    display: none;
}

/* ---- Responsive Anpassungen für Mobilgeräte ---- */
@media (max-width: 768px) {
    .sections-container {
        flex-direction: column; /* Stapelt die Karten untereinander */
        padding: 15px;
        color:white;
    }

    .info-card {
        min-height: 300px; /* Kleinere Höhe auf Mobilgeräten */
    }

    .card-content h2 {
        font-size: 1.5rem; /* Kleinere Schriftgröße */
    }
    /* Einblenden der mobilen Elemente */
    .arrow-icon {
        display: flex; /* Wieder als flex anzeigen, um Zentrierung zu behalten */
    }

    .copyright-icon {
        display: block;
    }

    .mobile-br {
        display: block; /* Zeilenumbruch wird sichtbar */
    }
}



.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
}

.footer-line>div, .footer-line, .footer-line .textwidget .custom-html-widget {
	width: 100%;
	flex:1
}

.center-login-button {
	align-items: center;
}

/*** Teaser Slider ***/
.front-page-slider div, .front-page-slider {
    display:block !important;
}
.slider-container.front-page-slider, .video-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;
}
.center-login-button {
	align-items: center;
}

/*** 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
}
.page-header-overlay {
	background-color:none;
}
/* 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;
}