/*===========================================================
 CUSTOM VARIABLES
============================================================*/
:root {
    /* Layout Variables */
    --container-max-width: 1300px;
    --container-padding: 12px;
    --grid-gutter: 24px;
    --header-height: 0;

    /* Hamburger Menu Variables */
    --ham-width: 40px;
    --ham-height: 4px;
    --ham-margin: 6px;
    --ham-translate: 10px;
    --ham-translate-negative: -10px;

    /* Color Palette  */
    --accent: var(--color-magenta);
    --menu: var(--color-white);

    /* Typography Scale */
    --xl: 42px;
    --lg: 32px;
    --lg2: 26px;
    --md: 20px;
    --md2: 18px;
    --sm: 16px;
    --xs: 14px;
    --base: var(--xs);
    --xxs: 12px;
    /* Font Family */
    --family-primary: "Roboto", sans-serif;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-light: 0px 1px 3px #eeeeee;
    --shadow-normal: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 4px 8px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --radius-small: 4px;
    --radius-normal: 8px;
    --radius-large: 12px;
    --radius-round: 50px;
}

/*===========================================================
 RESET & BASE STYLES
============================================================*/
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
	width: 100vw;
	overflow-x: hidden;
}

body {
    font-family: var(--family-primary);
    font-size: var(--sm);
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-black);
    letter-spacing: normal;

    overflow-x: hidden !important;
}

/* Focus styles for accessibility */
:focus {
    outline: 2px dashed var(--accent) !important;
    outline-offset: 2px;
}

/**:active,
*:focus {
    outline: none;
    border: 0;
}*/

/*===========================================================
 TYPOGRAPHY
============================================================*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
p + ul,
p + ol {
    margin-top: 25px;
}

strong {
    font-weight: 700;
}

u {
    border-bottom: 1px solid var(--color-white);
    line-height: 1;
    text-decoration: none;
}

/*===========================================================
 LINKS
============================================================*/
a {
    color: currentColor;
    text-decoration: none;
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
}

a:hover,
button:hover {
    text-decoration: none !important;
    outline: 2px dotted var(--color-black) !important;
}

.maincontent a {
    border-bottom: 1px solid currentColor;
}

/*===========================================================
 LAYOUT SYSTEM
============================================================*/
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.row {
    --gutter-x: var(--grid-gutter);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x) * -0.5);
    margin-left: calc(var(--gutter-x) * -0.5);
}

.row > * {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
}

.col {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
}

/* Column sizes - Mobile first */
.col-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
.col-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
.col-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }

/* Desktop column sizes - 992px and above */
@media (min-width: 992px) {
    .col-lg-1 { -webkit-box-flex: 0; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { -webkit-box-flex: 0; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { -webkit-box-flex: 0; -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { -webkit-box-flex: 0; -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { -webkit-box-flex: 0; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { -webkit-box-flex: 0; -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { -webkit-box-flex: 0; -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}

/* Utility Classes */
.cboth {
    overflow: hidden;
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

/*===========================================================
 IMAGES
============================================================*/
img {
    max-width: 100%;
    height: auto;
}

img.lazy {
    background-image: url("../img/loading.gif");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px auto;
    height: auto;
}

/*===========================================================
 BUTTONS
============================================================*/
button {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
}

button:active,
button:focus {
    outline: 0;
}

.btn {
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
}

.btn:hover {
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
}
.bttn {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px;
    padding: 0 18px !important;
    line-height: 38px !important;
}

/*===========================================================
 FORMS & INPUTS
============================================================*/
::-webkit-input-placeholder {
    font-size: var(--xxs) !important;
    font-weight: normal !important;
    color: var(--color-black) !important;
    line-height: 30px !important;
    letter-spacing: 0.39px !important;
}

:-moz-placeholder {
    font-size: var(--xxs) !important;
    font-weight: normal !important;
    color: var(--color-black) !important;
    line-height: 30px !important;
    letter-spacing: 0.39px !important;
}

::-moz-placeholder {
    font-size: var(--xxs) !important;
    font-weight: normal !important;
    color: var(--color-black) !important;
    line-height: 30px !important;
    letter-spacing: 0.39px !important;
}

:-ms-input-placeholder {
    font-size: var(--xxs) !important;
    font-weight: normal !important;
    color: var(--color-black) !important;
    line-height: 30px !important;
    letter-spacing: 0.39px !important;
}

/*===========================================================
 MAIN LAYOUT
============================================================*/

/*===========================================================
HEADER & NAVIGATION Basic Setup - DESKTOP
============================================================*/

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header > .menu {
    gap: 20px;
}

/* Logo Section */
.menu-left a {
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 10px;
    border: 0;
}

.menu-left a img {
    display: block;
    width: auto;
    height: 120px;
}

/* Main Navigation */
.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.menu-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px;
}
.menu ul {
    margin: 0;
    list-style: none;
}

.menu ul li {
    list-style: none;
    display: inline-block;
    margin: 0 !important;
}
.menu-bttn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
}

.menu-bttn a span {
    position: relative;
}

/* Dropdown Menus Basic*/
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children > a {
    position: relative;
}

.menu-toggle {
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    pointer-events: none;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
}

.menu .dropdown-menu li {
    display: block;
    position: relative;
}

.dropdown-menu li a {
    display: block;
    text-decoration: none;
}
.title {
    font-size: var(--lg);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-blau);
    margin: 0 !important;
}
.text-center {
    text-align: center;
}
/* ===================Banner Area=================== */
.banner-area {
    background-image: url(../img/banner.png);
    min-height: 470px;
    background-repeat: no-repeat;
    background-position: right center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 70px;
}
.banner-text {
    max-width: 625px;
    width: 100%;
}
.banner-text h1 {
    font-size: var(--xl);
    font-weight: 900;
    line-height: 1.19;
    color: var(--color-blau);
    margin: 0;
}
.banner-text p {
    font-size: var(--md2);
    line-height: 1.44;
    margin-top: 10px;
    margin-bottom: var(--md);
}
/* ================================Posts Grid (Masonry Layout)============== */
/* Unified masonry system for all post types (news, courses, mixed) */
.grid-container {
    /* Default: Regular CSS Grid Layout */
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* When masonry is enabled, flex layout is overridden by JS */
.grid-container.masonry-enabled {
    display: block; /* Masonry will handle the layout via JS */
}

/* Keep old class for backwards compatibility */
.posts-inner {}
.news-inner {}
.courses-inner {}
.mixed-posts-inner {}

/* Grid items - unified sizing for all card types */
.grid-item {
    width: calc((100% - 30px) / 3); /* 3 columns with 15px gap between */
}

/* When masonry is enabled, use masonry's width system */
.grid-container.masonry-enabled .grid-item {
    width: calc(33.333% - 10px);
    margin-bottom: 15px;
}

/* News box specific styles */
.news-box {
    border: 3px solid;
    background-color: var(--color-white);
    overflow: hidden;
}
a.news-box {
    border-bottom: 3px solid;
}
.news-img img {
    width: 100%;
}

.news-box .news-text *:last-child {
    margin-bottom: 0;
}
/* ================================Offend Area============== */
.offered-text {
    max-width: 50%;
    width: 100%;
}
.offered-text p {
    margin-top: 10px;
    margin-bottom: var(--md);
}
.filtern-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--md);
}
.select select {
    padding: 0 5px;
    background-image: url(../img/arrow-down.svg);
    background-size: 12px;
    background-position: 97% center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.filtern {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    margin-bottom: 20px;
}
.select select {
    width: 179px;
    height: 30px;
    border: solid 1px #053787;
    font-size: var(--xxs);
    font-weight: normal;
    color: var(--color-black);
    padding: 0 5px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Course Type Filter Toggles */
.filtern .course-type-toggle {
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-black);

    transition: color 0.3s ease;
}

.filtern .course-type-toggle:hover,
.filtern .course-type-toggle.active {
    color: var(--color-magenta);
}

.filtern .course-type-toggle svg {
    width: 24px;
    height: 24px;
}

.select {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--md);
}
.search_form {
    position: relative;
    max-width: 370px;
    width: 100%;
}

body.error404 .search_form {
    margin-left: auto;
    margin-right: auto;
}

.search_form input {
    width: 100%;
    height: 30px;
    border: solid 1px #053787;
    padding: 0 10px;
    padding-right: 25px;
}
.search_form button {
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* Course card specific styles */
.courses-card {
    background: var(--color-white);
    border: 3px solid;
}
.courses-img {
    position: relative;
}
.timer {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--color-white);
    padding: 10px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.timer span {
    font-size: var(--sm);
    font-weight: normal;
    color: var(--color-violet);
    line-height: 1;

    display: flex;
    align-items: center;
    gap: 10px;
}
.timer span i {
    color: var(--color-violet);
    font-size: var(--md);
}
.online-meeting {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-left: 30px;
}
.online-meeting i {
    color: var(--color-black) !important;
    font-size: var(--lg2) !important;
}
.online-meeting:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 30px;
    left: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: currentColor;
}
.courses-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.courses-img.wb-no-post-image {
    padding: 60px 0 20px 0;
}

.courses-img img {
    width: 100%;
}
.bd-purple {
    border-color: var(--color-violet);
}
.bd-green {
    border: 3px solid #48ac60;
}
.courses-text {
    padding: 10px;
    padding-bottom: var(--md);
}
.courses-text h6 {
    font-size: var(--xs);
    font-weight: normal;
    color: var(--color-black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    text-transform: uppercase;
}
.courses-text h6 i {
    font-size: var(--md2);
}
.courses-text h3 {
    font-size: var(--lg2);
    font-weight: bold;
    color: var(--color-black);
}
.referent {
    margin-bottom: 25px;

    display: flex;
    align-items: center;
    gap: 20px;
}
.referent p {
    line-height: 1.3;
    margin: 0;
}
.referent span {
    font-size: var(--base);
}

.referent-image {
    flex-shrink: 0;
}

.referent-image img {
    border-radius: 100%;
    display: block;

    width: 72px;
    height: 72px;
    object-fit: cover;
}

/* Referent hover popup */
.referent-hover {
    position: relative;
    cursor: help;
}

.referent-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    width: 400px;
    max-width: 100vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.referent-hover:hover .referent-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-20px);
    pointer-events: auto;
}

/* Invisible bridge area for easier hover navigation */
.referent-popup::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 30px;
    background: transparent;
}

.referent-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: white;
}

.referent-popup-image {
    margin-bottom: 1rem;
    text-align: center;
}

.referent-popup-image img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    object-fit: cover;
}

.referent-popup-content h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #333;
}

.referent-popup-title {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    font-style: italic;
}

.referent-popup-content p {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.referent-popup-content p:last-of-type {
    margin-bottom: 0;
}

.referent-popup-link {
    display: inline-block;
    color: var(--primary-color, #007cba);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.referent-popup-link:hover {
    color: var(--primary-color-dark, #005a87);
}

.courses-card .button-holder {
    display: flex;
    gap: 20px;
}

/* Course Type Toggle Tooltips */
.course-type-toggle-wrapper {
    position: relative;
    display: inline-block;
}

.course-type-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.course-type-toggle:hover .course-type-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-15px);
}

/* Arrow at bottom of tooltip */
.course-type-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: white;
}

.course-type-tooltip-content {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
}

/* Referent Single Page Styles */
.referent-header {
    padding: 3rem 0;
}

.referent-info-header {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.referent-profile-image {
    flex-shrink: 0;
}

.referent-profile-image img {
    width: 200px;
    height: 200px;
    object-fit: cover;

    display: block;

    border-radius: 100%;
}

.referent-details {
    flex: 1;
}

.referent-name {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.referent-title {
    font-size: 1.25rem;
    color: var(--color-magenta);
    margin-bottom: 1rem;
    font-weight: 600;
}

.referent-description {
    font-size: 1.1rem;
    line-height: 1.6;
}

.referent-courses {
    padding: 2rem 0 4rem;
}

.referent-content {
    padding: 3rem 0;
    background: #f9f9f9;
}

.referent-bio {
    font-size: 1.05rem;
    line-height: 1.8;
}

.referent-bio p {
    margin-bottom: 1.25rem;
}

.referent-bio h2,
.referent-bio h3,
.referent-bio h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #222;
}

.referent-bio h2 {
    font-size: 1.75rem;
}

.referent-bio h3 {
    font-size: 1.5rem;
}

.referent-bio h4 {
    font-size: 1.25rem;
}

.referent-bio ul,
.referent-bio ol {
    margin-bottom: 1.25rem;
    padding-left: 2rem;
}

.referent-bio li {
    margin-bottom: 0.5rem;
}

.referent-bio a {
    color: var(--color-magenta);
    text-decoration: underline;
}

.referent-bio a:hover {
    text-decoration: none;
}

.referent-courses h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .referent-info-header {
        flex-direction: column;
        text-align: center;
    }

    .referent-name {
        font-size: 2rem;
    }

    .referent-bio {
        font-size: 1rem;
    }

    .referent-bio h2 {
        font-size: 1.5rem;
    }

    .referent-bio h3 {
        font-size: 1.25rem;
    }
}

/* Single Post Styles */
.post-header {
    padding: 3rem 0 2rem;
}

.post-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 1rem 0;
    line-height: 1.2;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    color: #6c757d;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.post-meta i {
    margin-right: 0.375rem;
}

.post-excerpt {
    font-size: 1.125rem;
    color: #495057;
    line-height: 1.6;
    margin-top: 1rem;
}

.post-featured-image {
    margin: 2rem 0;
}

.post-featured-image img {
    width: 100%;
    height: auto;
}

.post-content {
    padding: 2rem 0;
}

.post-description .content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: #212529;
}

.post-description .content h2,
.post-description .content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.post-sidebar {
    position: sticky;
    top: 2rem;
}

.widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.widget h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.related-post-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #dee2e6;
}

.related-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.related-post-thumbnail {
    flex-shrink: 0;
}

.related-post-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.related-post-content h4 {
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.related-post-content h4 a {
    color: #212529;
    text-decoration: none;
}



.related-post-date {
    font-size: 0.8125rem;
    color: #6c757d;
}

@media (max-width: 991px) {
    .post-sidebar {
        position: static;
        margin-top: 3rem;
    }

    .post-title {
        font-size: 2rem;
    }
}

/* Course Single Page Styles */
.course-header {
    padding: 3rem 0 2rem 0;
}

.course-header .row {
    align-items: flex-end;
}

.badge {
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

.course-title {
    margin: 1rem 0;
    font-size: 2.5rem;
    font-weight: bold;
}

.course-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0.5rem 0 1.5rem 0;
}

.course-excerpt {
    font-size: 1.2rem;
}

.course-excerpt p {
    margin-bottom: 0;
}

.course-meta {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 2rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.meta-label {
    font-weight: bold;
    color: #666;
}

.meta-value {
    font-weight: bold;
}

.course-meta-teachers {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.course-meta-teachers .referent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 200px;
}

.course-meta-teachers .referent-image img {
    width: 50px;
    height: 50px;
}

.course-meta-teachers .referent-info p {
    margin: 0;
    font-size: 0.9rem;
}

.course-content {
    padding: 2rem 0;
}

.detail-section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.detail-section h3 {
    color: var(--theme-primary-color, #333);
    margin-bottom: 1rem;
}

.tags-list {
    margin: 2rem 0;
}

.tags-list .tag {
    display: inline-block;
    margin: 0.25rem 0.5rem 0.25rem 0;
}

.course-sidebar {
    padding-left: 2rem;
}

.course-dates-widget {
    margin-bottom: 2rem;
    border-radius: 10px;
}

.course-dates-widget h3 {
    color: var(--theme-primary-color, #333);
    margin-bottom: 1rem;
}

.date-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;

    border-left: 4px solid;
}

.date-time strong {
    color: var(--theme-primary-color, #333);
    font-size: 1.1rem;
}

.course-metadata {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.course-type-in_person {
    background: rgba(237, 237, 237, 0.3);
    color: var(--color-magenta);
}

.course-type-online {
    background: rgba(237, 237, 237, 0.3);
    color: var(--color-blau);
}

.course-type-hybrid {
    background: rgba(237, 237, 237, 0.3);
    color: var(--color-orange);
}

.booking-status {
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.status-open {
    background: rgba(237, 237, 237, 0.3);
    color: var(--color-gruen);
}

.status-limited {
    background: rgba(237, 237, 237, 0.3);
    color: var(--color-orange);
}

.status-full {
    background: rgba(237, 237, 237, 0.3);
    color: #721c24;
}

.status-cancelled {
    background: #f5f5f5;
    color: #000000;
}

.date-actions {
    margin-top: 1rem;
}

.date-item .date-time {
    margin-bottom: 10px;
}

.date-details small i {
    width: 10px;
    text-align: center;
}

.course-teachers-widget .referent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.course-teachers-widget .referent-info p {
    margin: 0;
    font-size: 0.9rem;
}

.course-teachers-widget .referent-info span {
    color: #999;
    font-size: 0.8rem;
}

/* Lounge Single Page Styles - mirrors course-single */
.lounge-header {
    padding: 3rem 0 2rem 0;
}

.lounge-header .row {
    align-items: flex-end;
}

.lounge-title {
    margin: 1rem 0;
    font-size: 2.5rem;
    font-weight: bold;
}

.lounge-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0.5rem 0 1.5rem 0;
}

.lounge-excerpt {
    font-size: 1.2rem;
}

.lounge-excerpt p {
    margin-bottom: 0;
}

.lounge-meta {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 2rem;
}

.lounge-meta-teachers {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e0e0e0;
}

.lounge-meta-teachers .referent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 200px;
}

.lounge-meta-teachers .referent-image img {
    width: 50px;
    height: 50px;
}

.lounge-meta-teachers .referent-info p {
    margin: 0;
    font-size: 0.9rem;
}

.lounge-content {
    padding: 2rem 0;
}

.lounge-sidebar {
    padding-left: 2rem;
}

.lounge-dates-widget {
    margin-bottom: 2rem;
    border-radius: 10px;
}

.lounge-dates-widget h3 {
    color: var(--theme-primary-color, #333);
    margin-bottom: 1rem;
}

.lounge-metadata {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.lounge-teachers-widget .referent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.lounge-teachers-widget .referent-info p {
    margin: 0;
    font-size: 0.9rem;
}

.lounge-teachers-widget .referent-info span {
    color: #999;
    font-size: 0.8rem;
}

/* Responsive styles for lounge single */
@media (max-width: 991px) {
    .lounge-sidebar {
        padding-left: 0;
        margin-top: 2rem;
    }

    .lounge-meta-teachers .referent {
        flex: 1 1 100%;
    }
}

@media (max-width: 767px) {
    .lounge-title {
        font-size: 1.8rem;
    }

    .lounge-subtitle {
        font-size: 1.2rem;
    }

    .lounge-header {
        padding: 2rem 0 1rem 0;
    }
}
/* ================================RegisterArea============== */
.register-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    min-height: 320px;

    margin-bottom: 100px;
}
.register-area:after {
    position: absolute;
    content: "";
    width: calc(100% - 130px);
    height: 320px;
    background-color: var(--color-magenta);
    left: 0;
    top: 0;
    z-index: -1;
}
.register-area:before {
    position: absolute;
    content: "";
    width: calc(100% - 130px);
    height: 320px;
    background-color: var(--color-blau);
    right: 0;
    top: 70px;
}
.register {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 320px;
}
.register-text {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 950px;
    width: 100%;
    top: 70px;
}
.register-text h2 {
    font-size: var(--xl);
    font-weight: 900;
    line-height: 1.19;
}

.register-text h2,
.register-text p {
    color: var(--color-white);
    font-weight: 900;
    line-height: 1.19;
}

.register-bttn .bttn {
    font-size: var(--md);
    line-height: 58px !important;
}
/* ================================Contact Area============== */
.contact-area {
    background: var(--color-white);
    margin-top: 20px;
}

.contact-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.contact-right {
    max-width: 575px;
    width: 100%;
    background-color: var(--color-gray);
    padding: 40px;
}
.contact-right p {
    margin-top: 10px;
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--color-black);
}
.contact-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px 0;
    margin: 30px 0;
}
.contact-info a {
    font-size: var(--sm);
    font-weight: normal;
    line-height: 1.5;
    color: var(--color-black);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0;
    gap: 7px;
}
.contact-info a i {
    color: var(--color-magenta);
    font-size: var(--md2);
}
.social-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
}
.social-icon a {
    border: 0;
    color: var(--color-magenta);
    font-size: var(--lg2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 35px;
    height: 35px;
    padding: 0;
}
.social-icon a {
    background: var(--color-magenta);
    border-radius: 50%;
    color: var(--color-white) !important;
    padding: 5px;
    font-size: var(--base) !important;
}

.social-icon a i {
    font-size: 18px;
}

/* ============================Stay Up Area================ */
.news-box {
    position: relative;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}

.news-box .news-text-spacer {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    position: relative;
}

.news-box .news-text,
.news-box .news-text-spacer {
    padding: 20px 10px;
}

.news-box .news-text h3,
.news-box .news-text-spacer h3 {
    font-size: var(--md);
    font-weight: bold;
    margin: 0;
}

.news-box .news-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    z-index: 2;
}

/* Background overlay that expands smoothly */
.news-box .news-text::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: -500px;
    background-color: var(--color-white);
    transform: scaleY(0.15);
    transform-origin: bottom;
    -webkit-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
    -o-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
    will-change: transform;
    z-index: -1;
}

.news-box .news-text h3,
.news-box .news-text p {
    position: relative;
    z-index: 1;
}

.news-box .news-text h3 {
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide excerpt initially */
.news-box .news-text p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    -webkit-transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
    -o-transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s, margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}

/* Expand news-text and reveal excerpt on hover */
.news-box:hover .news-text::before,
.news-box:focus .news-text::before {
    transform: scaleY(1);
}

.news-box:hover .news-text p,
.news-box:focus .news-text p {
    max-height: 500px;
    opacity: 1;
    margin-top: 10px;
}

.news-box:focus .img-overlay,
.news-box:hover .img-overlay {
    height: 100%;
}
/* =============== */
.single-line-form > form {
    text-align: right;
}

.single-line-form > form > .wpforms-field-container {
    display: inline-block;
    margin-right: 30px;

    width: calc(100% - 250px);
}

.single-line-form > form > .wpforms-submit-container {
    display: inline;
}

.wpforms-form input {
    all: unset !important;

    width: 100% !important;
    height: 43px !important;
    border: 0 !important;
    border-bottom: solid 3px var(--color-blau) !important;
    font-size: var(--md) !important;
    font-weight: bold !important;
    color: var(--color-black) !important;
    background: transparent !important;

    text-align: left !important;
}
.wpforms-form input::-webkit-input-placeholder {
    font-size: var(--md) !important;
    font-weight: bold !important;
    color: var(--color-black) !important;

    opacity: 1 !important;
}
.wpforms-form input::-moz-placeholder {
    font-size: var(--md) !important;
    font-weight: bold !important;
    color: var(--color-black) !important;

    opacity: 1 !important;
}
.wpforms-form input:-ms-input-placeholder {
    font-size: var(--md) !important;
    font-weight: bold !important;
    color: var(--color-black) !important;

    opacity: 1 !important;
}
.wpforms-form input:-moz-placeholder {
    font-size: var(--md) !important;
    font-weight: bold !important;
    color: var(--color-black) !important;

    opacity: 1 !important;
}
/* ============================Footer Area================ */
.footer-top-area {
    padding: 80px 0;
    background-color: var(--color-blau);
    border-radius: 120px 0 0 0;
    
    position: relative;
    z-index: 1;
}
.footer-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.footer-top .social-icon {
    justify-content: flex-end;
    margin-bottom: 20px;
}

.footer-top .social-icon a {
    background: var(--color-white);
    color: var(--color-blau) !important;
    border-radius: 100%;
}

.footer-top .wb-stiftung-spi-logo {
    display: block;
    color: var(--color-white);
}

.footer-top a:hover,
.footer-top a:active,
.footer-top a:focus {
    outline: 2px dotted var(--color-white) !important;
}

.footer-top .wb-stiftung-spi-logo img {
    width: auto;
    height: 55px;

    display: block;
}

.footer-top .menu {
    margin-bottom: 30px;
}
.footer-top .menu ul li a {
    color: var(--color-white);
}
.footer-top .menu .dropdown-menu li a {
    color: var(--color-black);
}
.footer-top .menu-toggle {
    background-image: url(../img/angle-down-white.svg) !important;
}
.footer-area {
    background-color: var(--color-magenta);
    padding: 10px 0;
}
.footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.footer p {
    font-size: var(--xs);
    font-weight: normal;
    line-height: 2;
    color: var(--color-white);
    margin: 0;
}
.footer div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
}
.footer a {
    font-size: var(--xs);
    font-weight: normal;
    line-height: 2;
    color: var(--color-white);
    border: 0;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}
/*===========================================================
Customize Menu
============================================================*/
.header-area {
    /* background-color: var(--color-magenta); */
    padding: 30px 0;
    background: var(--color-white);
}
/* Logo Section */
.menu-left span {
    font-size: var(--md);
    font-weight: 600;
    line-height: 1;
    color: var(--color-blau);
}

/* Main Navigation */

.menu ul li a {
    font-size: var(--base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-black);
    text-decoration: none;
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
    border-bottom: 0;
}
.menu-nav .active,
.menu ul li a:hover {
    color: var(--color-magenta);
    border-bottom: 1px solid var(--color-magenta);
}

.menu-item-has-children {
    margin-bottom: 0 !important;
}
.menu-item-has-children > a {
    padding-right: 40px;
}

.menu-toggle {
    background-image: url(../img/angle-down.svg);
    background-position: right center;
    background-size: 12px;
    right: 15px;
    width: 12px;
    height: 12px;
}
.dropdown-menu {
    min-width: auto;
    padding: 0 0;
    margin: 0 !important;
    font-size: var(--base);
    color: var(--color-black);
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-small);
    -webkit-box-shadow: var(--shadow-normal);
    box-shadow: var(--shadow-normal);
}
.dropdown-menu li {
    margin-bottom: 0 !important;
}
.menu .dropdown-menu li a {
    padding: 4px 16px;
    line-height: 1.4;
    color: var(--color-black);
    /* border-bottom: 0; */
    border-bottom: 1px solid var(--color-gray);
}
.dropdown-menu li:last-child a {
    border-bottom: 0;
}
.dropdown-menu li a:hover {
    /* background-color: var(--color-magenta); */
    color: var(--accent);
}

/*===========================================================
 MOBILE MENU & HAMBURGER
============================================================*/
.mobileMenuOpener {
    display: none;
    position: absolute;
    width: var(--md);
    height: 100%;
    z-index: 10;
}

.panel-header {
    display: none;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--color-white);
    -webkit-box-shadow: var(--shadow-light);
    box-shadow: var(--shadow-light);
    padding: 10px 15px;
}

body.admin-bar .panel-header {
	top: 32px;
}

.mobile-logo {
    width: 200px;
}

/* Hamburger Icon */
.btn-hamburger {
    cursor: pointer;
    padding: 10px;
}

.hamburger .line {
    width: var(--ham-width);
    height: var(--ham-height);
    background-color: var(--color-magenta);
    display: block;
    margin: var(--ham-margin) auto;
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
}

.hamburger:hover {
    cursor: pointer;
}

.hamburger:hover .line {
    opacity: 0.8;
}

/* Hamburger Animation */
.slideout-open .line:nth-child(2) {
    opacity: 0;
}

.slideout-open .line:nth-child(1) {
    -webkit-transform: translateY(var(--ham-translate)) rotate(45deg);
    -ms-transform: translateY(var(--ham-translate)) rotate(45deg);
    transform: translateY(var(--ham-translate)) rotate(45deg);
}

.slideout-open .line:nth-child(3) {
    -webkit-transform: translateY(var(--ham-translate-negative)) rotate(-45deg);
    -ms-transform: translateY(var(--ham-translate-negative)) rotate(-45deg);
    transform: translateY(var(--ham-translate-negative)) rotate(-45deg);
}

/* Slideout Menu */
.slideout-menu {
    position: fixed;
    top: 76px;
    bottom: 0;
    left: 0;
    width: 256px;
    height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    background: var(--menu);
}

.slideout-panel {
    position: relative;
    z-index: 1;
    min-height: 100vh;

	background: var(--color-white);
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
    overflow: hidden;
}

.slideout-open .slideout-menu {
    display: block;
}

.menu-section-list {
    padding: 25px 10px;
}

.menu-section-list li {
    display: block;
}

.menu-section-list li a {
    line-height: 2;
    color: var(--color-white);
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-transition: var(--transition-normal);
    -o-transition: var(--transition-normal);
    transition: var(--transition-normal);
}

.menu-section-list li a:hover {
    color: var(--accent);
}

/*===========================================================
 SCROLL TO TOP
============================================================*/
.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    border-radius: var(--radius-round);
    -webkit-box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.progress-wrap svg.progress-circle path {
    fill: none;
    stroke: var(--color-black);
    stroke-width: 4;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.angle-top {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: var(--transition-slow);
    -o-transition: var(--transition-slow);
    transition: var(--transition-slow);
}

.progress-wrap:hover .angle-top path {
    fill: var(--color-white);
}

.menu::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.menu::-webkit-scrollbar-track {
    background: var(--color-gray);
}

/* Handle */
.menu::-webkit-scrollbar-thumb {
    background: var(--color-blau);
}

/* Handle on hover */
.menu::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}
/*===========================================================
 PRELOADER
============================================================*/
.preloader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--color-white);
    z-index: 99999999;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 2px solid var(--color-black);
    border-top: 3px solid var(--accent);
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

#loading-msg {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 25px;
    text-align: center;
    color: var(--color-black);
    font-size: 0.8em;
}

/*===========================================================
 WB POST PRODUCTION ELEMENTS
============================================================*/

.wb-marker-element {
    position: absolute;
}

.wb-marker-element img {
    display: block;
    width: 50px;
}

.wb-marker-element ~ * {
    margin-left: 60px;
}

/*===========================================================
 RESPONSIVE DESIGN
============================================================*/

/* Desktop Navigation Behavior */
@media (min-width: 992px) {
    .menu-item-has-children:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-menu .dropdown-menu {
        position: absolute;
        left: 100%;
        top: 0;
    }

    .dropdown-menu .menu-item-has-children .menu-toggle {
        -webkit-transform: translateY(-50%) rotate(-90deg);
        -ms-transform: translateY(-50%) rotate(-90deg);
        transform: translateY(-50%) rotate(-90deg);
        right: 10px;
        top: 50%;
    }
}
@media (max-width: 1399px) {
    .register-text {
        max-width: 850px;
    }
    .footer-top-area {
        border-radius: 80px 0 0;
    }
}

@media (max-width: 1199px) {
    .menu-nav {
        gap: 15px;
    }
    .menu-left {
        width: 190px;
    }
    .menu-item-has-children > a {
        padding-right: 10px;
    }
    .menu-bttn {
        gap: 10px;
    }
    .menu-toggle {
        right: -5px;
    }
    .banner-area {
        position: relative;
    }
    .banner-area:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(255, 255, 255, 0.7);
    }
    .banner {
        position: relative;
    }
    .banner-text {
        position: relative;
    }
    .sec-padding-top {
        padding-top: 100px;
    }
    :root {
        --xl: 36px;
        --lg: 30px;
        --lg2: 24px;
        --md: 19px;
        --md2: 18px;
        --sm: 16px;
        --xs: 14px;
        --base: var(--xs);
        --xxs: 12px;
    }
    .overlay-text h3 {
        font-size: var(--md2);
        margin-bottom: 5px;
        line-height: 1.2;
    }
    .overlay-text p {
        font-size: var(--sm);
        line-height: 1.2;
    }
    .register-area:after,
    .register-area:before {
        width: calc(100% - 40px);
    }
    .register-text {
        max-width: 800px;
    }
    .lounges-card {
        max-width: calc(50% - 5px);
    }
    .lounges-text h3 {
        line-height: 1.1;
    }
    .lounges-text p {
        margin: 2px 0;
    }
    .timer {
        padding: 8px;
        left: 5px;
        top: 5px;
    }
    .online-meeting {
        padding-left: 23px;
    }
    .online-meeting img {
        width: 16px;
    }
    .timer span i {
        font-size: 16px;
    }
    .timer span {
        font-size: 14px;
    }
    .online-meeting:before {
        height: 20px;
    }
    .lounges-text h6 {
        line-height: 1.2;
    }
    .courses-text h3 {
        line-height: 1.3;
    }
    .contact-left {
        padding-right: 30px;
    }
    .newsletter-text {
        max-width: calc(100% - 60px);
        padding-left: 15px;
    }
    .footer-top-area {
        border-radius: 50px 0 0;
    }
    .single-line-form > form > .wpforms-field-container {
        margin-right: 10px;
    }
    .newsletter-left,
    .newsletter-right {
        max-width: 50%;
    }
}
@media (max-width: 991px) {
    :root {
        --xl: 38px;
        --lg: 28px;
        --lg2: 22px;
        --md: 18px;
        --md2: 17px;
        --sm: 16px;
        --xs: 14px;
        --base: var(--xs);
        --xxs: 12px;
    }
    #main {
        padding-top: 0;
    }
    .banner-area {
        margin-top: 90px;
    }

    .footer-top .menu-nav {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .footer-top .menu ul li a {
        padding: 0;
    }
    .footer-top .menu {
        width: 126px;
    }
    .footer-top .menu-nav {
        width: 126px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    .footer-top .menu-nav li {
        width: 100%;
    }
    .footer-top .menu-nav .active {
        border-bottom: 1px solid var(--color-white) !important;
        color: var(--color-white);
    }
    .footer-top .menu ul li a {
        width: 100%;
    }
    .footer-top .dropdown-menu li a {
        color: var(--color-white) !important;
        padding: 5px 0;
    }
    .footer-top .dropdown-menu li a {
        padding: 7px 0 !important;
    }
    .header-area {
        display: none;
    }
    .news-inner {
        gap: 10px 0;
    }
    .news-box {
        max-width: calc(50% - 5px);
    }
    .overlay-text h3 {
        font-size: var(--md);
        margin-bottom: 10px;
        line-height: 1.3;
    }
    .offered-text {
        max-width: 100%;
    }
    .search {
        max-width: 250px;
    }
    .select select,
    .filtern-left input {
        background-position: 94% center;
    }

    /* Flexbox Grid: 2 columns for tablet */
    .grid-item {
        width: calc((100% - 15px) / 2); /* 2 columns with 15px gap */
    }

    /* When masonry is enabled on tablet */
    .grid-container.masonry-enabled .grid-item {
        width: calc(50% - 7.5px);
    }
    .lounges-card {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .lounges-img {
        max-width: 100%;
        width: 100%;
    }
    .lounges-img img {
        width: 100%;
    }
    .lounges-text {
        width: 100%;
        padding: 20px 10px;
    }
    .lounges-text h3 {
        font-size: 20px;
    }
    .lounges-text p {
        margin: 5px 0;
    }
    .register-bttn .bttn {
        font-size: var(--md);
        line-height: 48px !important;
    }
    .register-text {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        gap: 30px 0;
    }
    .newsletter {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 50px 0;
    }
    .newsletter-left,
    .newsletter-right {
        max-width: 100%;
        gap: 50px 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .filtern-left input,
    .select select {
        width: 130px;
    }
    .mobileMenuOpener {
        display: block;
    }

    .panel-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        background: var(--color-white);
    }

	body.admin-bar .panel-header {
		top: 46px;
	}

	#main {
		margin-top: 89px;
	}

    .menu ul li {
        display: block;
    }

    .menu ul li a {
        width: 100%;
        color: var(--color-black);
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        line-height: 2;
    }

    .dropdown-menu {
        width: 100%;
        background-color: transparent;
        border: none;
        position: static;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-left: var(--md);
    }

    .dropdown-menu li a {
        padding-left: 0;
        padding-right: 0;
        color: var(--color-white);
    }

    .menu-toggle {
        right: 10px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .mobile-logo {
        width: unset;
    }
}

/* Tablet */
@media (max-width: 767px) {
    .container {
        padding: 0 var(--md);
    }

    .mobile-logo img {
        width: 150px;
    }
    .filtern {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 20px 0;
    }
    .search {
        max-width: 100%;
    }
}
@media (max-width: 655px) {
    /* Masonry: 1 column for mobile */
    .grid-item {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .container {
        padding: 0 15px;
    }

    :root {
        --xl: 34px;
        --lg: 28px;
        --lg2: 22px;
        --md: 18px;
        --md2: 17px;
        --sm: 16px;
        --xs: 14px;
        --base: var(--xs);
        --xxs: 12px;
    }

    .progress-wrap {
        right: var(--md);
        bottom: var(--md);
        height: 40px;
        width: 40px;
    }
    .contact-inner {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 25px 0;
    }
    .contact-left,
    .contact-right {
        max-width: 100%;
    }
    .lounges-card {
        max-width: 100%;
    }
    .lounges {
        gap: 15px 0;
    }
    .register-area:after,
    .register-area:before {
        width: calc(100% - 10px);
    }
    .contact-right {
        padding: 20px;
    }
    .footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .footer-top {
        flex-direction: column;
        gap: 30px;
    }
    .social-icon {
        gap: 8px;
    }
    .footer-top-area {
        border-radius: 0;
    }
}
@media (max-width: 420px) {
    .select {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .filtern-left input,
    .select select {
        width: 100%;
        height: 30px;
    }
    .filtern-left input {
    }
    .select select {
        width: 100%;
    }
    .footer-top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 30px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/*===========================================================
 404 PAGE & SEARCH PAGE - CRAYON ANIMATION
============================================================*/
.page-404,
.page-search {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.page-404-content,
.search-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 40px 20px;
    margin-left: auto;
    margin-right: auto;
}

.search-content {
    text-align: left;
}

.search-content .search_form,
.search-content article {
    margin-bottom: 100px;
}

.page-404-content h1,
.search-content h1 {
    font-size: var(--xl);
    font-weight: 900;
    color: var(--color-blau);
    margin-bottom: 20px;
}

.page-404-content p,
.search-content p {
    font-size: var(--md);
    color: var(--color-black);
    margin-bottom: 30px;
}

.noSearchResults {
    text-align: center;
    font-size: var(--md);
    padding: 40px 20px;
}

/* Canvas Elements */
#crayon-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
}