/**
* Theme Name: Weiterbildungskolleg Bochum
* Author: Lucas Bockhorst
* Author URI: 
* Description: WordPress Theme for Weiterbildungskolleg Bochum
* Version: 1.0.2
* Tested up to: 5.4
* Requires PHP: 5.6
* License: GNU General Public License v2 or later
* License URI: LICENSE
* Text Domain: weiterbildungskollegbochum

**/

:root {
    --primary-logo-1: #004790;
    --primary-logo-1plus: #0067B1;
    --primary-logo-2minus: #0085C8;
    --primary-logo-2: #36AEE4;
    --primary-logo-2new: #4cbdef;
    --primary-logo-2: var(--primary-logo-2new);
    --primary-logo-2plus: #82CCF2;
    --secondary-logo: #6B7880;
    --secondary-logo-2: #A0B4B9;

    --primary-a-01: #0454A3;
    --primary-a-02: #38ADE3;
    --secondary-b-01: #104862;
    --secondary-b-02: #30A37F;
    --secondary-c-01: #50266E;
    --secondary-c-02: #804796;
    --secondary-m-01: #942346;
    --secondary-m-02: #D01F73;
    --secondary-n-01: #D56D0E;
    --secondary-n-02: #F2B721;
    --secondary-p-01: #006656;
    --secondary-p-02: #BBC800;

    --page-width: 920px;

    /* font related */
    --font-family: "Ropa Sans";
    --font-family-content-default: "Open Sans";

    /* font size */
    --font-size-menu: 2.71vw;
    --font-size-menu-fix: 33px;
    --font-size-menu-sub-fix: 20px;
    --font-size-menu-sub: 1.58vw;
    --font-size-h1-fix: var(--font-size-menu);
    --font-size-h2-fix: calc(var(--font-size-menu) - 0.1em);
    --font-size-content-static: calc(var(--font-size-menu-sub) - 0.2em);
    --font-size-content: var(--font-size-content-static);
    --font-size-menu-dropdown: var(--font-size-menu-sub);
    --font-size-testimonial: var(--font-size-h2-fix);
    --font-size-testimonial-author: var(--font-size-menu-sub);
    /* font line height */
    --font-lh-menu: 39px;
    --font-lh-menu-sub: 20px;
    --font-lh-h1-fix: var(--font-lh-menu);
    --font-lh-h2-fix: 29.9px;
    /*calc(var(--font-lh-h1-fix) - 0.3em);*/
    --font-lh-testimonial: var(--font-lh-h1-fix);
    --font-lh-content: 22.4px;
    /* font weight */
    --font-weight-menu: 400;
    --font-weight-menu-sub: var(--font-weight-menu);
    --font-weight-h1: var(--font-weight-menu);
    --font-weight-h2: var(--font-weight-menu);
    --font-weight-content: var(--font-weight-menu);
    --font-weight-strong: 500;


    --background-menu: var(--primary-logo-2new);
    --background-menu-active: var(--primary-logo-2minus);
    
    --background-menu-dropdown: var(--primary-logo-1);
    --background-menu-dropdown-active: var(--primary-logo-2plus);

    --height-navbar-fix: 100px;
    --height-navbar: 7.7vw;
    --height-navbar-dropdown: 40px;
    --max-width-navbar-li: calc(calc(var(--page-width) / 3) - 20px);
    --width-navbar-li-static: 22vw;
    --width-navbar-li-upper: var(--width-navbar-li);
    --width-navbar-li: var(--width-navbar-li-upper);
    --margin-bottom-menu-sub: 7px;
    --mobil-menu-visible: none;
   
    --dropdown-spacer: 1px;

    /**
        Side Nav
    */

    --bs-navbar-padding-y: 0;

    /**
        Logo
    */

    --width-logo: var(--width-navbar-li);
    --max-width-logo: var(--max-width-navbar-li);

    --height-slider-fix: auto;
    --width-slider-fix: auto;

    --testimonial-visible: visible;

    --max-width-site-right: 140px;
    --width-site-right: var(--max-width-site-right);
    --max-height-site-right: 80px;
    --height-site-right: var(--max-height-site-right);

    --max-width-site-right-burgermenu: calc(var(--max-width-site-right) - 20px);
    --max-width-site-right-schriftgr: calc(var(--max-width-site-right) - 20px);
    --max-height-site-right-burgermenu: calc(calc(var(--max-height-site-right) - 20px) / 2);
    --max-height-site-right-schriftgr: calc(calc(var(--max-height-site-right) - 20px) / 2);
    --width-site-right-burgermenu: calc(var(--width-site-right) - 1vw);
    --width-site-right-schriftgr: calc(var(--width-site-right) - 1vw);
    --height-site-right-burgermenu: calc(calc(var(--height-site-right) - 1vw) / 2);
    --height-site-right-schriftgr: calc(calc(var(--height-site-right) - 1vw) / 2);

    --height-seperator: 6.9vw;
    --height-footer-post: 30px;

    --background-footer: var(--primary-logo-1);
    --height-footer-text: 170px;
    --height-footer: calc(var(--height-footer-text) + 100px);
    --height-footer-seperator: 8.4vw;

    --height-footer-img: 80px;


    --slider-transition-speed: 7s;

    
}

@media screen and (min-width: 1024px) {
    :root {
        --font-size-menu: var(--font-size-menu-fix);
        --font-size-menu-dropdown: var(--font-size-menu-sub-fix);
        --font-size-menu-sub: var(--font-size-menu-sub-fix);
        --height-navbar: 100px;
        --width-navbar-li-upper: var(--max-width-navbar-li);
        --height-footer-img: 80px;
        --height-footer-seperator: 150px;
        --dropdown-spacer: 1px;
        --margin-bottom-menu-sub: 10px;
    }
}

@media screen and (max-width: 766px) {
    :root {
        --testimonial-visible: hidden;
        --width-site-right: 100px;
        --height-site-right: 70px;
        --width-logo: 210px;
        --font-size-h1-fix: 27px;
        --font-size-h2-fix: 24px;
        --font-size-content: 14px;
        --height-slider-fix: 100%;
        --width-slider-fix: 100%;
        --mobil-menu-visible: block;
        --font-size-menu-sub-fix: 17px;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --testimonial-visible: hidden;
        --width-site-right: 100px;
        --height-site-right: 70px;
        --width-logo: 210px;
        --font-size-h1-fix: 27px;
        --font-size-h2-fix: 24px;
        --font-size-content: 14px;
        --height-slider-fix: 100%;
        --width-slider-fix: 100%;
        --mobil-menu-visible: block;
        --font-size-menu-sub-fix: 17px;
    }
}

#wpadminbar {
    z-index: 9999999999999999;
}

html, body{
    overflow-x: hidden;
}

.site {
    font-family: var(--font-family);
    font-size: var(--font-size-content) !important;
    position: relative;
    z-index: 1000000;
}

.page-root {
    max-width: var(--page-width);
}


.site-header > * {
    /* z-index: 10000; */
}

.site-header {
    position: relative;
    margin-top: 0;
    max-height: 400px;
    width: 100%;
    z-index: 10000;
}

.site-header .image-slider {
    position: relative;
    /* background: yellow; */
    width: 100%;
    z-index: -200;
}


.site-header .site-branding {
    height: 100%;
    position: absolute;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.site-header .site-logo {
    position: absolute; /* relative */
    margin-top: 0px;
    width: calc(var(--page-width) - 20px);
    margin-left: 0;
    left: 0; /* test */
    top:0; /* test */
    /* margin-right: auto; */
    max-height: 100px;
    align-self: flex-start;
}

.site-header .site-logo img {
    width: var(--width-logo);
    max-width: var(--max-width-logo);
}

.site-header .site-right {
    height: var(--height-site-right);
    max-height: var(--max-height-site-right);
    width: var(--width-site-right);
    max-width: var(--max-width-site-right);
    position: absolute;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.6vw;
}

.site-header .site-burgermenu {
    max-height: var(--max-height-site-right-burgermenu);
    max-width: var(--max-width-site-right-burgermenu);
    height: var(--height-site-right-burgermenu);
    width: var(--width-site-right-burgermenu);
    right: 0;
    cursor: pointer;
}

.site-header .site-schriftgr {
    max-height: var(--max-height-site-right-schriftgr);
    max-width: var(--max-width-site-right-schriftgr);
    height: var(--height-site-right-schriftgr);
    width: var(--width-site-right-schriftgr);
    right: 0;
    cursor: pointer;
}

.site-header .site-title {
    position: relative;
}

.site-header .image-slider img {
    height: auto;
    width: 100%;
    max-height: 400px;
    z-index: 1;
}

.site-header .image-slider img.fix {
    height: var(--height-slider-fix);
    width: var(--width-slider-fix) !important;
    max-height: 400px;
    position: relative;
    margin-top: 0;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
}

.site-header .image-slider .object-fit {
    width: 100%;
    height: auto;
}

.site-header .image-slider img.fix {
    object-fit: cover;
}

.site-header .image-slider img.blur {
    filter: blur(20px);
    position: absolute;
}

.site-header .carousel-item {
    transition: transform var(--slider-transition-speed) ease, opacity .5s ease-out;
}

.navbar-container {
    /* margin-top: 15px; */
    margin-bottom: 0px;
}

.navbar-main.navbar {
    margin-top: calc(calc(var(--height-navbar) * -1) + 25px);
}

.navbar-main.navbar, .navbar-main.navbar .container {
    background: none !important;
    padding: 0;
    height: var(--height-navbar);
    justify-content: center;
}

.navbar-main.navbar > .container {
    justify-content: center;
    width: var(--page-width);
}

.navbar-main.navbar-collapse {
    flex-grow: 0;
}

.navbar-main.navbar ul.navbar-nav {
    height: var(--height-navbar);
}

.navbar-main.navbar li.menu-item {
    height: var(--height-navbar);
    background: var(--background-menu);
    color: #FFFFFF;
    vertical-align: middle;
}



.navbar-main.navbar li.menu-item a {
    /* background: var(--background-menu); */
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--font-size-menu);
}

.navbar-expand-md .navbar-collapse {
    justify-content: center;
}

.navbar-main.navbar li.menu-item a .sub {
    font-size: var(--font-size-menu-sub);
    margin-top: -10px;
}

.navbar-main .dropdown-toggle::after {
    margin-left: calc(50% - 23px);
    margin-bottom: var(--margin-bottom-menu-sub);
    bottom: 0px;
    position: absolute;
}

.navbar-main.navbar li.menu-item:hover, .navbar-main.navbar li.menu-item.show {
    background: var(--background-menu-active);
}

.navbar-main.navbar-expand-md .navbar-toggler {
    display: none !important;
}



.navbar-main.navbar ul.navbar-nav li {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: var(--max-width-navbar-li);
    width: var(--width-navbar-li-upper);
}

.navbar-main.navbar li.menu-item ul.dropdown-menu {
    border: 0;
    background: var(--background-menu-dropdown);
    margin-top: var(--dropdown-spacer);
    width: var(--width-navbar-li);
    max-width: var(--max-width-navbar-li);
    border-radius: 0;
}

.navbar-main.navbar li.menu-item ul.dropdown-menu li, .navbar-main.navbar li.menu-item ul.dropdown-menu li a {
    background: var(--background-menu-dropdown);
    width: calc(var(--width-navbar-li) - 20px);
    max-width: calc(var(--max-width-navbar-li) - 20px);
    flex-wrap: wrap;
    font-size: var(--font-size-menu-dropdown);
    line-height: var(--font-lh-menu-sub);
    font-weight: var(--font-weight-menu-sub);
    height: auto;
    text-wrap: wrap;
    text-align: left;
    justify-content: left;
    padding-left: 0px;
    padding-right: 10px;
}

.navbar-main.navbar li.menu-item ul.dropdown-menu li a {
    padding-left: 5px;
    padding-right: 5px;
}

.navbar-main.navbar li.menu-item ul.dropdown-menu .dropdown-item {
    min-height: auto;
}

.navbar-main.navbar li.menu-item ul.dropdown-menu .dropdown-item:hover {
    background: var(--background-menu-dropdown-active);
}

.site-header .header-image-seperator img {
   filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(135deg) brightness(103%) contrast(100%);
   color: #FFFFFF;
   /* height: var(--height-seperator); */
   max-width: 100%;
}

.site-header .header-image-seperator {
    margin-top: calc(var(--height-seperator) * -1);
    /* height: var(--height-seperator); */
    overflow: hidden;
}

.navbar-side.navbar {
    padding: 0;
}

.navbar-side .menu-mobil {
    display: var(--mobil-menu-visible);
    border-bottom: 1px dashed black;
}

.navbar-side .navbar-nav {
    font-size: var(--font-size-menu-sub-fix) !important;
}


/**
* MAIN CSS
*/


.site-main {
    color: #000000;
    position: relative;
    max-width: 100%;
    margin-top: 40px;
    z-index: -10000;
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: calc(var(--height-footer) + 100%);
    padding: 10px;
}


.site-main .index #post-101 .entry-header h1 {
    display: none;
}

.site-main .index #post-101 .entry-header {
    height: 20px;
    margin-bottom: 20px;
}

.site-main .ce-holder {
    display: flex;
    flex-direction: column;
    width: calc(var(--page-width) - 20px);
}

.site-main > article {
    display: flex;
    max-width: calc(var(--page-width) - 20px);
    flex-direction: column;
    /* align-items: center; */
}

.site-main h1, .site-main h1 a {
    font-size: var(--font-size-h1-fix);
    font-family: var(--font-family);
    font-weight: var(--font-weight-h1);
    line-height: var(--font-lh-h1-fix);
    color: #FFFFFF;
    background-color: var(--primary-logo-1);
    text-align: left;
    margin-left: 0;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    display: inline-block;
}

.site-main .entry-header h1, .site-main .entry-header h1 a, .site-main .entry-content h1, .site-main .entry-content h1 a {
    color: #FFFFFF;
    text-decoration: none;
}

.site-main h2, .site-main h2 a, .site-main h3, .site-main h3 a, .site-main h4, .site-main h4 a, .site-main h5, .site-main h5 a,
.site-main h6, .site-main h6 a {
    font-family: var(--font-family);
    font-size: var(--font-size-h2-fix);
    font-weight: var(--font-weight-h2);
    line-height: var(--font-lh-h2-fix);
    color: #FFFFFF;
    margin-bottom: 0;
    margin-top: 30px;
}

.site-main .entry-header h2, .site-main .entry-header h2 a, .site-main .entry-content h2, .site-main .entry-content h2 a,
.site-main .entry-header h3, .site-main .entry-header h3 a, .site-main .entry-content h3, .site-main .entry-content h3 a,
.site-main .entry-header h4, .site-main .entry-header h4 a, .site-main .entry-content h4, .site-main .entry-content h4 a,
.site-main .entry-header h5, .site-main .entry-header h5 a, .site-main .entry-content h5, .site-main .entry-content h5 a,
.site-main .entry-header h6, .site-main .entry-header h6 a, .site-main .entry-content h6, .site-main .entry-content h6 a {
    color: #000000;
    text-decoration: none;
}

.site-main .entry-footer {
    height: var(--height-footer-post);
}

.site-main .entry-content, .site-main .entry-header {
    font-family: var(--font-family-content-default);
    font-size: var(--font-size-content);
    font-weight: var(--font-weight-content);
    line-height: var(--font-lh-content);
    color: #000000 !important;
}

.site-main .has-medium-font-size, .site-main .has-medium-font-size strong {
    font-size: var(--font-size-h2-fix) !important;
    font-family: var(--font-family);
    line-height: var(--font-lh-h2-fix) !important;
    font-weight: var(--font-weight-h2);
}


.site-main .cover {
    max-width: 300px;
    max-height: 400px;
    margin-bottom: 10px;
}


p:has(strong) {
    margin-bottom: 0;
}

.wp-block-columns {
    margin-top: 50px;
}

.wp-block-image + h1 {
    margin-top: 15px;
}

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0;
}

.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content {
    padding-right: 0;
}

.entry-header .meta-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 2px;
}

.entry-header .posted-on {
    /* border-right: 1px solid black; */
    /* flex: 1 1 auto; */
}

.entry-header .post-taxonomies::before {
    content: " | ";
}

.entry-header .post-taxonomies {
    /* flex: 1 1 auto; */
}

.entry-header .edit-link::before {
    content: " | ";
}
.entry-header .edit-link {
    /* flex: 1 1 auto; */
}

/* .entry-content:after {
    content: " ";
    display: block;
    clear: both;
} */

/* .wp-block-image:after {
    content: " ";
    display: block;
    clear: both;
} */

.wp-block-separator {
	opacity: 0.8;
	color: black;
}

p {
	word-break: break-word;
	word-wrap: break-word;
}


.wp-block-image .alignleft {
    margin-right: 20px;
}

/* FOOTER */

.filter-black {
    filter: invert(1);
}

.site-footer {
    position: relative;
    bottom: 0;
    /* background: var(--background-footer); */
    /* min-height: var(--height-footer); */
    height: auto;
    width: 100%;
    color: #FFFFFF;
    /* padding-bottom: 10px; */
}

.site-footer .footer-image-seperator {
    /* transform: rotate(180deg); */
    height: var(--height-footer-seperator);
    overflow: hidden;
    margin-top: 0px;
    /* background: red; */
}

.site-footer .footer-image-seperator .seperator-bottom {
    margin-top: 10px;
    /* height: 100%; */
    width: calc(100%);
}

.site-footer .site-infos {
    background: var(--background-footer);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

.site-footer .site-info {
    display: flex;
    flex-direction: column;
}

.site-footer .site-info .footer-title {
    font-weight: bold;
    margin-bottom: 0px;
}

.site-footer .site-info .footer-email a {
    color: #FFFFFF;
    text-decoration: none;
}

.site-footer .site-info .footer-email a:hover {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
}

.site-footer .footer-symbols, .offcanvas-body .footer-symbols {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    height: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.offcanvas-body .footer-symbols {
    height: auto;
    margin-top: 0px;
}

.site-footer .footer-symbols img, .offcanvas-body .footer-symbols img {
    max-height: 80px;
    height: var(--height-footer-img);
}

.offcanvas-body .footer-symbols img {
    height: calc(var(--height-footer-img) - 20px);
}

.site-footer .footer-patreon {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    height: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.site-footer .footer-patreon img {
    max-height: 80px;
    height: var(--height-footer-img);
}

@media screen and (max-width: 600px) {
    .image-slider {
        /* position: relative; */
        margin-top: var(--height-site-right);
    }

    .site-branding {
        margin-top: calc(var(--height-site-right) * -1)
    }

    .site-right {
        background-color: var(--primary-logo-1) !important;
    }
}