/*
 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.4
 Last Update: 2025-07-10
 Text Domain:  wp_tj_knowhub_template-child
*/

.center-login-button {
    flex-direction: column;
}
.center-login-button p {
    text-align: center;
}
.center-login-button a {
    justify-content: center;
    display: flex;
}


/* 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);
    }
}
/* root */
:root {
    --gap-small: 8px;
    --gap-medium: 12px;
    --gap-large: 24px;
    --sidebar-nav-width: 250px;
    --text-color: #2b3435;
    --teejit--accent--gray: #e9e9e9;
    --primary-background: #39d130; /*#e10019;*/
    --primary-color:#fff;
    --primary-background-hover: #58e650; /* if not set --primary-color */
    --primary-color-hover: #fff; /* if not set --primary-background */
    --primary-padding:8px 16px;
    --secondary-background:#2b3435;
    --secondary-color: #fff;
    --secondary-background-hover:#2b3435d1; /* if not set --secondary-color */
    --secondary-color-hover: #fff; /* if not set --secondary-background */
    --accordion-background:#ecf0f1; /* if not set --secondary-background */
    --accordion-color: #2b3435; /* 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: #39d130;
    --teejit-error: #c22f56;
    --teejit-advise: #ff8c00;
    --teejit-advise-contrast: #2b3435;
    --process-background-done: #ced4da;
    --process-background-undone: #7f8c8d;
    --tag-label-background: #e4e4e4;
    --tag-label-color: #2b3435;
    --tag-label-border-color: #e4e4e4;
    --tag-categroy-background: #fff;
    --tag-categroy-color: #2b3435;
    --tag-categroy-border-color: #39d130;
    --tag-audience-background: #fff;
    --tag-audience-color: #2b3435;
    --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: #f6f6f8;
    --teejit-input-border: #f6f6f8;
}
#t-nav-toggle-left-menu {
    height: 43px;
}
.t-tag-nav-home-flag-active, .t-tag-nav:hover {
    color: var(--primary-background);
}
.btn {
    font-weight: 600;
    letter-spacing: .03125rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .5rem 1.5rem .375rem;
    font-size: .95rem;
    line-height: 1.57895;
    border-radius: 1.625rem;
    transition: color .25s ease-in-out, background-color .25s ease-in-out, border-color .25s ease-in-out, box-shadow .25s ease-in-out;
}

.t-content-main a {
    color: var(--primary-background) !important;
}
#page .page-header-overlay {
    background-color: rgba(0, 0, 0, 0.2)
}
#page .t-title {
    text-align: center;
    color:white;
}
a {

}
.menu-footer-line-container  {
    font-size: .95rem;
    letter-spacing: .0125em;
}
.menu-footer-line-container ul {
    padding-left: 0;
    list-style: none;
    margin-top: 0;
    gap: 12px;
    display: flex;
    margin-bottom:  0px;
    margin-top:12px;
}
.menu-footer-line-container ul li {
    float: left;
}
.menu-footer-line-container ul li a {
    color: #2b3435 !important;
    transition: color .25s ease-in-out;
}
.menu-footer-line-container ul li a:hover {
    color: #090b0b !important;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}
body {
    margin: 0;
    font-family: Soehne,sans-serif;
    font-weight: 400;
    line-height: 1.57895;
    color: #2b3435;
    text-align: left;
    background-color: #fff
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: 1.25rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

.h1,.h2,.title-lg,.title-sm,h1,h2 {
    font-family: Melange,sans-serif;
    font-weight: 700
}

.h3,.h4,.h5,.h6,h3,h4,h5,h6 {
    font-weight: 600
}


/* CSS Variables */
:root {
    --text-color: #2b3435;
    --primary-background: #39d130;
    --primary-color: #fff;
    --primary-background-hover: #58e650;
    --primary-color-hover: #fff;
    --primary-padding: 8px 16px;
    --secondary-background: #2b3435;
    --secondary-color: #fff;
    --teejit-padding-xl: 20px;
    --teejit-padding-l: 16px;
    --teejit-padding-m: 12px;
    --font-size-h2: 20px;
    --font-weight-h2: bold;
    --teejit-btn-border-radius-medium: 3px;
}

/* Base Typography */
body {
    margin: 0;
    font-family: Soehne, sans-serif;
    font-weight: 400;
    line-height: 1.57895;
    color: #2b3435;
    text-align: left;
    background-color: #fff;
    letter-spacing: .025em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Headings */
h2 {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.05263;
    letter-spacing: -.025em;
    color: inherit;
}

@media (min-width: 992px) {
    h2 {
        font-size: 2.375rem;
        margin-bottom: 1.5rem;
    }
}

/* Paragraphs */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Images */
img.image {
    margin: 0 0 1rem;
    width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
}

/* Container System */
.container {
    width: 100%;
    padding-right: 8px;
    padding-left: 8px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .container {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (min-width: 1216px) {
    .container {
        max-width: 1184px;
    }
}

/* Grid System */
.row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

.col-12,
.col-md-6 {
    position: relative;
    width: 100%;
    padding-right: 8px;
    padding-left: 8px;
}

.col-12 {
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.col-md-6 {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

@media all and (max-width: 770px) {
    .col-md-6 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Frame System */
.frame {
    position: relative;
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
}

@media (min-width: 992px) {
    .frame {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
}

.frame-inner {
    position: relative;
    z-index: 1;
}

.frame-inner > :last-child {
    margin-bottom: 0;
}

/* Frame Background Dark */
.frame-background-dark {
    background: #2b3435;
    background: linear-gradient(45deg, #242a2c 0, #2b3435 50%, #3c4448 100%);
    color: #fff;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
    margin-top: auto;
    margin-bottom: auto;
}

@media (min-width: 992px) {
    .frame-background-dark {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* Background Images */
@media (min-width: 992px) {
    .frame-bgimage-globe {
        z-index: 1;
    }

    .frame-bgimage-globe::after {
        content: "";
        position: absolute;
        width: 525px;
        height: 645px;
        top: -28px;
        max-width: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: -1;
    }

    .frame-bgimage-globe.frame-background-dark::after {
        top: 100px;
    }

    .frame-bgimage-globe.bgimage-primary::after {
        background-image: url(/typo3conf/ext/wvier_speciality/Resources/Public/Assets/Production/Images/INC-globe-green.svg);
    }

    .frame-bgimage-globe.bgimage-right::after {
        right: 0;
        background-position-x: 120px;
    }
}

/* Frame Header */
.frame-header {
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .frame-header {
        margin-bottom: 1.5rem;
    }
}

.frame-header > :last-child {
    margin-bottom: 0;
}


@media (min-width: 992px) {
    .btn {
        padding: .75rem 2rem .625rem;
    }
}

.btn-primary {
    color: #fff;
    background-color: #39d130;
    border-color: #39d130;
}

.btn-primary:hover {
    color: #fff;
    background-color: #58e650;
    border-color: #58e650;
}

.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #2da925;
    border-color: #2da925;
}

/* Textpic Specific Styles */
.frame-type-textpic .btn-primary {
    margin-top: 0.5rem;
}

/* Links in textpic */
.frame-type-textpic a:not(.btn):not(.link-primary):not(.link-primary-back):not(.img-link):not(.link-external) {
    position: relative;
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(#39d130, #39d130);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 3px;
    padding-bottom: 4px;
}

.frame-type-textpic a:not(.btn):not(.link-primary):not(.link-primary-back):not(.img-link):not(.link-external):hover {
    color: #39d130;
}

/* Lists in textpic */
.frame-type-textpic ul,
.frame-type-textpic ol {
    padding-left: 1em;
}

.frame-type-textpic ul {
    list-style: none;
    list-style-image: none;
    list-style-type: none;
}

.frame-type-textpic ul li {
    position: relative;
}

.frame-type-textpic ul li::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -1em;
    top: 0.5263158em;
    width: 6px;
    height: 6px;
    background-color: #39d130;
    border-radius: 1rem;
}

.frame-type-textpic ul li + li {
    margin-top: 0.5rem;
}

@media (min-width: 992px) {
    .frame-type-textpic ul li + li {
        margin-top: 0.75rem;
    }
}