/* Layout */

html {
    font-size: clamp(0.85rem, 0.75vw + 0.4rem, 1rem) !important;
}

html, body {
    margin: 0;
    padding: 0;
    background: unset !important;
}

body.admin-open homepage {
    margin-right: var(--admin-content-panel-width);
}

body.preload homepage {
    opacity: 0;
}

body.hydrated homepage {
    opacity: 1;
}

h1 {
    font-size: calc(var(--design-font-size) + 0.3rem) !important;
    color: unset !important;
}
h2 {
    font-size: calc(var(--design-font-size) + 0.2rem) !important;
    color: unset !important;
}
h3 {
    font-size: calc(var(--design-font-size) + 0.1rem) !important;
    color: unset !important;
}

leftone, lefttwo, leftthree, leftfour, leftfive, rightone, righttwo, rightthree, rightfour, rightfive {
    margin: 0;
    padding: 0;
    background-color: var(--design-color-left-and-right-background);
}
leftone {
    grid-area: leftone;
}
lefttwo {
    grid-area: lefttwo;
}
leftthree {
    grid-area: leftthree;
}
leftfour {
    grid-area: leftfour;
}
leftfive {
    grid-area: leftfive;
}
rightone {
    grid-area: rightone;
}
righttwo {
    grid-area: righttwo;
}
rightthree {
    grid-area: rightthree;
}
rightfour {
    grid-area: rightfour;
}
rightfive {
    grid-area: rightfive;
}

offline {
    display: block;
    text-align: center;
    padding: 2rem;
    font-family: 'Segoe UI', sans-serif;
    font-size: 3rem;
}
    offline i {
        color: #e74c3c;
        margin-bottom: 3rem;
    }
    offline h1 {
        color: #333;
    }

homepage {
    background-color: var(--design-color-layout-background);
    font-family: var(--design-font-family);
    font-size: var(--design-font-size) !important;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: var(--layout-grid-template-columns);
    grid-template-rows: var(--layout-grid-template-rows);
    grid-template-areas: var(--layout-grid-template-areas);
    min-height: 100vh;
    transition: opacity 0.3s ease-in;
}

@media (max-width: 1024px) {
    homepage {
        grid-template-rows: var(--layout-grid-mobile-template-rows);
        grid-template-columns: 1fr;
        grid-template-areas: var(--layout-grid-mobile-template-areas);
    }

    body.admin-open homepage {
        margin-right: 0;
    }
}

/* animations */

.animate-from-left {
    opacity: 0;
    transform: translateX(calc(var(--layout-default-padding) * -1));
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .animate-from-left.in-view {
        opacity: 1;
        transform: translateX(0);
    }

.animate-from-right {
    opacity: 0;
    transform: translateX(var(--layout-default-padding));
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .animate-from-right.in-view {
        opacity: 1;
        transform: translateX(0);
    }

.animate-fade-up {
    opacity: 0;
    transform: translateY(var(--layout-default-padding));
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .animate-fade-up.in-view {
        opacity: 1;
        transform: translateY(0);
    }

/* general components */

.button {
    all: unset;
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--layout-button-border-radius);
    font-size: calc(var(--design-font-size) + 0.3rem);
    line-height: calc(var(--design-font-size) + 0.6rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

    .button:hover {
        transform: scale(1.01);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

/* Logo */

logo {
    position: var(--layout-logo-position);
    top: var(--layout-logo-top);
    display: var(--header-logo-display);
    background-color: var(--design-color-logo-background);
    color: var(--design-color-logo-font);
    grid-area: logo;
    flex-direction: row;
    justify-content: left;
    align-items: var(--layout-logo-align-items);
    padding-left: var(--layout-default-padding);
    height: var(--layout-logo-height);
    border-radius: var(--layout-logo-border-radius);
    gap: calc(var(--layout-default-padding) / 2);
    z-index: var(--layout-logo-z-index);
    transition: background 0.3s ease;
}

body.is-not-homepage logo {
    transition: none; /* no animation during switching */
}

body:not(.is-not-homepage).scrolled-to-top logo {
    background-color: var(--design-color-logo-background-when-covermedia-flush-top);
}

    logo a {
        all: unset;
        cursor: pointer;
    }

logoimage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    logoimage > img {
        max-height: 80%;
        max-width: 80%;
        height: auto;
        width: auto;
    }

logosymbol {
    display: block;
    height: var(--layout-logo-symbol-dimension);
    width: var(--layout-logo-symbol-dimension);
    background-color: var(--design-color-logo-font);
    mask: var(--header-logo-symbol-mask);
    -webkit-mask: var(--header-logo-symbol-mask);
}

logotext {
    font-size: 2rem;
    line-height: 2.2rem;
}

@media (max-width: 1024px) {
    logo {
        /*position: unset;
        top: unset;*/
        border-radius: unset !important;
    }
}

/* Slogan */

slogan {
    position: var(--layout-slogan-position);
    top: var(--layout-slogan-top);
    display: var(--header-slogan-display);
    background-color: var(--design-color-slogan-background);
    color: var(--design-color-slogan-font);
    padding: var(--layout-default-padding);
    font-size: calc(var(--design-font-size) + 0.3rem) !important;
    text-align: center;
    grid-area: slogan;
    display: var(--layout-slogan-display);
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: var(--layout-default-padding);
    border-radius: var(--layout-slogan-border-radius);
    z-index: var(--layout-slogan-z-index);
}

slogantext > p {
    display: block;
    line-height: calc(var(--design-font-size) + 0.6rem) !important;
    text-align: right;
    margin: unset !important;
}

slogan > a.button {
    background-color: var(--design-color-slogan-font);
    color: var(--design-color-slogan-background);
}

@media (max-width: 1024px) {
    slogan {
        display: none;
    }
}

/* Navigation */

navigation {
    position: var(--layout-navigation-position);
    top: var(--layout-navigation-top);
    background-color: var(--design-color-navigation-background);
    color: var(--design-color-navigation-font);
    font-size: calc(var(--design-font-size) + 0.2rem) !important;
    padding: var(--layout-default-padding);
    display: flex;
    flex-direction: var(--layout-navigation-flex-direction);
    align-items: center;
    justify-content: var(--layout-navigation-justify-content);
    gap: clamp(0rem, (100vw - 1280px) * 0.02, 2rem);
    grid-area: navigation;
    width: auto;
    height: auto;
    border-radius: var(--layout-navigation-border-radius);
    margin-top: var(--layout-navigation-margin-top);
    margin-bottom: var(--layout-navigation-margin-bottom);
    z-index: var(--layout-navigation-z-index);
    transition: background 0.3s ease;
}

body.is-not-homepage navigation {
    transition: none; /* no animation during switching */
}

body:not(.is-not-homepage).scrolled-to-top navigation {
    background-color: var(--design-color-navigation-background-when-covermedia-flush-top);
}

    navigation a:not(.button) {
        color: var(--design-color-navigation-font);
        padding: 0.5rem;
        text-align: center;
        align-items: center;
        text-decoration: none;
        width: var(--layout-navigation-items-width);
        height: var(--layout-navigation-height);
        display: flex;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
        cursor: pointer;
        transition: border-bottom 0.3s ease;
    }

    navigation a.active:not(.button) {
        border-bottom: 3px solid var(--design-color-navigation-font);
    }

navigation a:hover:not(.button) {
    border-bottom: 3px solid var(--design-color-navigation-font);
}

    navigation > a.button {
        background-color: var(--design-color-navigation-font);
        color: var(--design-color-navigation-background);
    }

.navigation-toggle {
    display: none;
    background-color: white;
    color: black;
    border: none;
    font-size: 1.5rem;
    background-color: var(--design-color-logo-font);
    color: var(--design-color-logo-background);
    width: 3rem;
    height: 3rem;
    border-radius: var(--layout-navigation-toggle-border-radius);
    position: fixed;
    right: 1.5rem;
    top: calc(calc(var(--layout-logo-height) / 2) - calc(3rem / 2));
    cursor: pointer;
    z-index: 15;
}

.navigation-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 19;
    display: none;
}

@media (max-width: 1024px) {
    navigation {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: fixed;
        top: 0;
        left: 0;
        width: 15rem;
        height: 100%;
        transform: translateX(-100%);
        z-index: 20;
        box-sizing: border-box;
        justify-content: start;
        border-radius: unset !important;
        margin-top: unset !important;
        margin-bottom: unset !important;
        background-color: var(--design-color-navigation-background) !important;
    }

        navigation a.active:not(.button) {
            border-bottom: 3px solid transparent;
        }

        body.navigation-open navigation a:hover:not(.button), navigation a:not(.button) {
            border-bottom: 3px solid transparent;
        }

        body.navigation-open .navigation-backdrop {
            display: block;
        }

    body.navigation-open navigation {
        transform: translateX(0);
    }

    .navigation-toggle {
        display: block;
    }
}

/* CoverMedia */

covermedia {
    position: relative;
    width: 100%;
    border-radius: var(--layout-covermedia-border-radius);
    margin-top: var(--layout-covermedia-margin-top);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    grid-area: covermedia;
    display: var(--layout-covermedia-display);
    z-index: 1;
}

body:not(.is-homepage) covermedia {
    height: 0;
    display: none;
}

.covermedia-media video,
.covermedia-media img {
    position: var(--layout-covermedia-media-position);
    top: 0;
    left: 0;
    width: 100%;
    height: var(--layout-covermedia-media-height);
    object-fit: cover;
    object-position: var(--layout-covermedia-object-position);
    background-color: var(--design-color-logo-background);
    z-index: 0;
}

.covermedia-content-wrapper {
    position: relative;
    z-index: 2;
    width: var(--layout-covermedia-content-width);
    margin: var(--header-covermedia-margin);
    display: flex;
    justify-content: var(--header-covermedia-justify-content);
    text-align: var(--header-covermedia-text-align);
}

.covermedia-content {
    background-color: var(--design-color-covermedia-content-background);
    color: var(--design-color-covermedia-font);
    padding: var(--layout-default-padding);
    border-radius: var(--layout-covermedia-content-border-radius);
    max-width: 40rem;
}

.covermedia-headline {
    font-size: calc(calc(var(--design-font-size) + 0.3rem) * var(--header-covermedia-headline-size-factor)) !important;
    margin: 0rem;
}

.covermedia-text {
    font-size: calc(var(--design-font-size) + 0.2rem) !important;
}

p.covermedia-text {
    margin: 0 !important;
}

.covermedia-text p {
    margin: 1rem 0 0 !important;
    font-size: calc(var(--design-font-size) + 0.2rem) !important;
}

covermedia a.button {
    background-color: var(--design-color-covermedia-font);
    color: var(--design-color-covermedia-background);
    margin: 1.5rem 0 0rem;
}

@media (max-width: 1024px) {
    covermedia {
        border-radius: unset !important;
        margin-top: unset !important;
        margin-bottom: unset !important;
    }

    .covermedia-media video,
    .covermedia-media img {
        height: var(--layout-covermedia-media-original-height);
    }

    .covermedia-content-wrapper {
        width: 100%;
        margin: var(--layout-default-padding);
    }

    .covermedia-headline {
        font-size: max( calc(var(--design-font-size) + 0.3rem), calc(calc(var(--design-font-size) + 0.3rem) * calc(var(--header-covermedia-headline-size-factor) * 0.75)) ) !important;
    }
}

/*Sidebar*/
.sidebar-slider {
    width: 100% !important;
}

.sidebar-slider-text {
    margin: 0 5px 0 15px;
}

/* Content */

content {
    display: flex;
    flex-direction: column;
    color: var(--design-color-content-font);
    grid-area: content;
    border-radius: var(--layout-content-border-radius);
    margin-top: var(--layout-content-margin-top);
    margin-bottom: var(--layout-content-margin-bottom);
    background-color: var(--design-color-content-background);
    overflow: hidden;
    z-index: 1;
}

    content a.button {
        background-color: var(--design-color-content-font);
        color: var(--design-color-content-background);
    }

.content-blockgroup {
    display: flex;
    flex-direction: column;
}

.content-block-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .content-block-wrapper.even {
        background-color: var(--design-color-content-alternating-background);
    }

.content-block {
    width: calc(var(--layout-content-width) - calc(2 * var(--layout-default-padding)));
    padding: var(--layout-default-padding) 0;
}

.content-block-headline {
    font-size: calc(var(--design-font-size) + 0.2rem) !important;
    padding-bottom: calc(var(--layout-default-padding) / 2);
}

@media (max-width: 1024px) {
    content {
        border-radius: unset !important;
        margin-top: unset !important;
        margin-bottom: unset !important;
    }
    .content-block {
        width: calc(100% - calc(2 * var(--layout-default-padding)));
    }
}

/* Footer */

footer {
    background-color: var(--design-color-footer-background);
    color: var(--design-color-footer-font);
    grid-area: footer;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: var(--layout-footer-border-radius);
    z-index: 1;
}

    .footer-content {
        width: var(--layout-footer-width);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

        .footer-block {
            display: flex;
            flex-direction: column;
            flex: 1;
            align-items: flex-start;
            padding: var(--layout-default-padding);
        }

            .footer-block-headline {
                font-size: calc(var(--design-font-size) + 0.2rem);
                margin-bottom: 0.5rem;
            }

            .footer-block-item {
                font-size: var(--design-font-size);
                text-align: left;
            }

        .footer-block-copyright {
            height: 100%
        }

        .footer-block-copyright .footer-block-headline {
            align-self: end;
            text-align: right;
        }

        .footer-block-copyright .footer-block-item {
            align-self: end;
            text-align: right;
        }

        .footer-block-logo img {
            width: 100%;
            max-width: 15rem;
        }

        .footer-block-poweredby {
            justify-content: end;
            margin-top: auto;
        }

            .footer-block-poweredby img {
                height: 2.5rem;
            }

footer .footer-block-item a {
    all: unset !important;
    cursor: pointer !important;
    text-decoration: underline !important;
}

footer .footer-block-item a:hover {
    text-decoration: none !important;
}

.footer-block-social-media-links {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.footer-block-social-media-links a {
    all: unset;
    cursor: pointer;
}

footer #backToTopButton {
    position: fixed;
    width: 3rem;
    height: 3rem;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--design-color-footer-background);
    color: var(--design-color-footer-font);
    border: 2px solid var(--design-color-footer-font);
    border-radius: var(--footer-backtotopbutton-border-radius);
    font-size: 18px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
    display: var(--footer-backtotopbutton-display);
    opacity: 0;
    z-index: 15;
}

        footer #backToTopButton:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

    body.admin-open footer #backToTopButton {
        right: calc(2rem + var(--admin-panel-width));
    }

@media (max-width: 1024px) {
    footer {
        border-radius: unset !important;
    }

    .footer-content {
        width: 100%;
        flex-direction: column;
    }
    
    .footer-block-copyright .footer-block-item {
        align-self: start;
        text-align: left;
    }

    .footer-block-copyright .footer-block-headline {
        align-self: start;
        text-align: left;
    }

    .footer-block-poweredby {
        justify-content: start;
    }

    body.admin-open footer #backToTopButton {
        display: none;
    }
}

@media (max-width: 1280px) {
    .footer-block-openinghours {
        display: none;
    }
}

@media (max-width: 1480px) {
    .footer-block-sitemap {
        display: none;
    }
}

/* Cookie-Banner */

.cookie-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 300;
}

.cookie-banner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--design-color-footer-background);
    color: var(--design-color-footer-font);
    font-size: calc(var(--design-font-size) + 0.1rem);
    padding: 1rem;
    text-align: center;
    transition: bottom 0.5s ease;
    z-index: 301;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}

.cookie-info a {
    all: unset;
    text-decoration: underline;
    cursor: pointer;
}

.cookie-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

    .cookie-buttons a {
        font-size: calc(var(--design-font-size) + 0.1rem) !important;
        background-color: var(--design-color-footer-font);
        color: var(--design-color-footer-background);
        /*border: 0;*/
    }

/* Reconnect Modal */

#components-reconnect-modal {
    display: none;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
    }

.reconnect-fullscreen {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.reconnect-modal {
    background-color: var(--design-color-footer-background);
    padding: 2rem;
    border-radius: var(--layout-reconnect-modal-border-radius);
    text-align: center;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reconnect-text {
    color: var(--design-color-footer-font);
    margin-top: 1rem;
    font-size: calc(var(--design-font-size) + 0.2rem);
}
.reconnect-text-show,
.reconnect-text-failed,
.reconnect-text-rejected {
    display: none;
}
#components-reconnect-modal.components-reconnect-show .reconnect-text-show {
    display: block;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-text-failed {
    display: block;
}
#components-reconnect-modal.components-reconnect-rejected .reconnect-text-rejected {
    display: block;
}

#components-reconnect-modal a.button {
    margin-top: 1rem;
    background-color: var(--design-color-footer-font);
    color: var(--design-color-footer-background);
}

.spinner {
    display: none;
    width: 48px;
    height: 48px;
    border: 3px solid var(--design-color-footer-font);
    border-top: 3px solid var(--design-color-footer-background);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#components-reconnect-modal.components-reconnect-show .spinner {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Admin */

    :root {
        --admin-nav-panel-width: 6.75rem;
        --admin-content-panel-width: 19.5rem;
        --admin-panel-width: calc(var(--admin-nav-panel-width) + var(--admin-content-panel-width));
        --admin-panel-padding: 0.75rem;
        --admin-button-padding: 0.25rem;
        --admin-button-size: 2rem;
        --admin-lightgrey-color: #E4EDF2;
        --admin-darkgrey-color: #2E4A5C;
        --admin-blue-color: #018DEF;
        --admin-yellow-color: #FCD66C;
        --admin-white-color: #FFFFFF;
        --admin-grey-color: #999999;
    }

    @keyframes save-animation {
        0% {
            filter: brightness(1);
        }
        100% {
            filter: brightness(0.8);
        }
    }

    @keyframes demo-animation {
        0% {
            filter: brightness(1);
        }
        100% {
            filter: brightness(0.9);
        }
    }

    config-hr {
        all: unset;
        position: relative;
        background-color: var(--admin-darkgrey-color);
        border: none;
        height: 1px;
        margin: var(--admin-panel-padding) 0;
        left: calc(var(--admin-panel-padding) * -1);
        width: calc(100% + calc(var(--admin-panel-padding) * 2));
    }

    admin {
        position: fixed;
        top: 0;
        right: 0;
        width: var(--admin-panel-width);
        height: 100%;
        color: var(--admin-darkgrey-color) !important;
        z-index: 100;
        transform: translateX(100%);
        font-family: Arial !important;
        font-size: 0.875rem !important;
    }

body.admin-open admin {
    transform: translateX(0);
}

    .admin-stack {
        height: 100%;
    }

    .admin-blink {
        animation: save-animation 0.5s infinite alternate;
    }

    .admin-custom-divider {
        width: 100%;
        border-top: 1px solid var(--admin-lightgrey-color);
    }

    .admin-control-buttons {
        position: absolute;
        margin-top: var(--admin-button-padding);
        margin-right: var(--admin-button-padding);
        width: calc(var(--admin-nav-panel-width) - var(--admin-button-padding));
        height: var(--admin-button-size);
        display: none;
        justify-content: end;
        gap: var(--admin-button-padding);
    }

body.show-admin-control-buttons .admin-control-buttons {
    display: flex;
}

    .admin-button {
        width: var(--admin-button-size) !important;
        height: var(--admin-button-size) !important;
        min-width: unset !important;
        min-height: unset !important;
        padding: unset !important;
    }

    .admin-toggle-button {
        position: fixed !important;
        top: var(--admin-button-padding);
        right: var(--admin-button-padding);
        z-index: 101 !important;
        background-color: var(--admin-lightgrey-color) !important;
    }

body.admin-open .admin-toggle-button {
    right: calc(var(--admin-panel-width) - var(--admin-button-size));
}

    .admin-logout-button {
        position: fixed !important;
        bottom: var(--admin-button-padding);
        right: var(--admin-button-padding);
        z-index: 101 !important;
    }

body.admin-open .admin-logout-button {
    right: calc(var(--admin-content-panel-width) + var(--admin-button-padding));
}

    .admin-tabs {
        width: var(--admin-panel-width);
        height: 100%;
    }

.admin-tab-header, .admin-tab-statistic, .admin-tab-abo, .admin-tab-organization {
    margin-top: var(--admin-button-padding);
}

body.demo-mode .admin-tab-abo {
    animation: demo-animation 1s infinite alternate !important;
}

.admin-color-dropdown-container {
    display: flex;
    width: 7.8rem;
}

    .admin-color-dropdown-content {
        border-radius: 10px;
        height: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .admin-palette-selector {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .admin-palette-selector-container {
        display: flex;
        justify-content: center;
        gap: 4px;
        padding: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid var(--admin-lightgrey-color);
        border-radius: 4px;
    }

        .admin-palette-selector-container.selected {
            border: 1px solid var(--admin-blue-color);
        }

    .admin-palette-selector-color-box {
        flex: 1;
        height: 1.8rem;
        border-radius: 4px;
    }

    .admin-logo-image, .admin-covermedia-image {
        max-width: 100%;
        border: 1px solid var(--admin-lightgrey-color);
        border-radius: 4px;
        padding: 5px;
        width: fit-content;
    }

    .admin-logo-symbol {
        height: 64px;
        width: 64px;
        background-color: var(--admin-darkgrey-color);
        mask: var(--header-logo-symbol-mask);
        -webkit-mask: var(--header-logo-symbol-mask);
    }

    .admin-favicon-image {
        max-width: 64px;
        max-height: 64px;
        border: 1px solid var(--admin-lightgrey-color);
        border-radius: 4px;
        padding: 5px;
    }

.admin-subscription-card {
    background-color: var(--admin-lightgrey-color);
    padding: 12px !important;
}
.admin-subscription-card-active {
    border: 1px solid var(--admin-blue-color);
}
.admin-subscription-card-headline, .admin-subscription-card-price {
    font-size: 1.125rem;
    font-weight: bold;
}
    .admin-subscription-card-price {
        text-align: center;
    }
.admin-subscription-card-check-icon {
    color: var(--admin-blue-color);
    margin-top: 0.2rem;
}
.admin-subscription-card-price-tag {
    margin: 0 calc(-1 * 12px);
    padding: 0.35rem !important;
    color: var(--admin-lightgrey-color);
    background-color: var(--admin-darkgrey-color) !important;
}
.admin-subscription-card-upgrade-button {
    width: 100% !important;
    font-weight: bold !important;
}
.admin-subscription-card-price-discount, .admin-subscription-card-price-2nd-year {
    text-align: center;
}
.admin-subscription-card-price-highlighted {
    background-color: var(--admin-yellow-color);
    color: var(--admin-darkgrey-color);
}
.admin-subscription-card-active-date-details {
    font-weight: bold;
}
.admin-subscription-card-active-renew-details {
}

    .pexels-media-selector-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 8px;
    }

.pexels-media-selector-image-video-container {
    position: relative;
    border-radius: 8px;
    cursor: pointer;
}

.pexels-media-selector-image-video-item {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

    .pexels-media-selector-image-video-item:hover {
        transform: scale(1.05);
    }

    admin .rz-legend {
        display: none !important;
    }

admin .rz-chart g {
    /*transform: unset !important;*/
}

    .rz-selectbutton .rz-button-sm {
        display: flex !important;
        flex: 1;
        flex-direction: row !important;
        justify-content: center !important;
    }

span .rz-tabview-title, .rz-text-body1, .rz-input-text, .rz-dropdown-label, .rz-dropdown-item, .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data, .rz-label, admin .e-richtexteditor .e-rte-content .e-content {
    font-family: Arial !important;
    font-size: 0.87rem !important;
}

.rz-custom-dialog-side-titlebar-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
}

.rz-text-body1, .rz-input-text, .rz-dropdown-label, .rz-dropdown-item, .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    color: var(--admin-darkgrey-color) !important;
}

    .rz-dropdown, .rz-colorpicker {
        cursor: pointer !important;
    }

    .rz-text-body1 {
        margin-bottom: 0.25rem !important;
    }

    .rz-fieldset {
        border: 1px solid var(--admin-darkgrey-color) !important;
    }

    .rz-fieldset-content {
        padding: var(--admin-panel-padding) !important;
    }

    .rz-button.rz-primary.rz-shade-default {
        background-color: var(--admin-blue-color) !important;
        color: var(--admin-white-color) !important;
    }

    .rz-button-md {
        font-weight: unset !important;
    }

    .rz-button-sm {
        padding: 0.35rem 0.65rem !important;
    }

    .rz-fieldset-toggler.rzi {
        cursor: pointer;
    }

    .rz-fileupload-buttonbar {
        background-color: var(--admin-lightgrey-color) !important;
    }

    .rz-fileupload-choose:not(.rz-state-disabled) {
        background-color: var(--admin-blue-color) !important;
        color: var(--admin-white-color) !important;
    }

    .rz-progressbar-determinate.rz-progressbar-primary .rz-progressbar-value {
        background-color: var(--admin-blue-color) !important;
    }

    .rz-selectbutton .rz-button.rz-button-sm {
        border: 1px solid var(--admin-lightgrey-color) !important;
    }

        .rz-selectbutton .rz-button.rz-button-sm.rz-state-active, .rz-selectbutton .rz-button.rz-button-md.rz-state-active {
            background-color: var(--admin-blue-color) !important;
            color: var(--admin-white-color) !important;
        }

    .rz-tabview-nav li {
        background-color: var(--admin-lightgrey-color) !important;
        color: var(--admin-darkgrey-color) !important;
        border: 1px solid var(--admin-lightgrey-color) !important;
    }

        .rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
            padding-inline: 0.5rem !important;
        }

    .rz-tabview-left > .rz-tabview-nav {
        width: var(--admin-nav-panel-width) !important;
        margin-top: calc(calc(var(--admin-button-size) + var(--admin-button-padding)) + var(--admin-button-padding)) !important;
    }

        .rz-tabview-left > .rz-tabview-nav .rz-tabview-selected {
            border-left-color: var(--admin-blue-color) !important;
            color: var(--admin-blue-color) !important;
        }

        .rz-tabview-left > .rz-tabview-nav li {
            --background-color: var(--admin-lightgrey-color) !important;
        }

            .rz-tabview-left > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
                border-left-color: var(--admin-blue-color) !important;
                color: var(--admin-blue-color) !important;
            }

    .rz-tabview.rz-tabview-left > .rz-tabview-panels {
        width: var(--admin-content-panel-width) !important;
    }

    .rz-tabview-icon {
        margin-inline: 0 !important;
    }

    .rz-tabview-title {
        padding-inline: 0.5rem !important;
    }

    .rz-tabview-panel {
        padding: var(--admin-panel-padding) !important;
    }

    .rz-tabview-panels {
        border: unset !important;
        border-left: 1px solid var(--admin-lightgrey-color) !important;
    }

    .rz-fieldset-legend, .rz-text-body1, .rz-tabview-nav .rz-tabview-selected, .rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
        color: unset !important;
    }

    .rz-pager-element, .rz-button, .rz-colorpicker, .rz-color-box, .rz-lookup-search input, .rz-numeric, .rz-datepicker, .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox {
        font-family: Arial !important;
    }

        .rz-form-field-content, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox {
            border: 1px solid var(--admin-lightgrey-color) !important;
        }

    .rz-dialog-side {
        border-radius: unset !important;
    }

    .rz-dialog-side-position-right {
        width: var(--admin-panel-width) !important;
        z-index: 200 !important;
        border-radius: var(--rz-dialog-border-radius) 0 0 var(--rz-dialog-border-radius) !important;
    }

.rz-dialog-mask {

    opacity: unset !important;
}

.rz-grid-table {
    width: unset !important;
}

.rz-dialog-mask {
    background-color: rgba(0,0,0,0.5) !important;
    opacity: 0.8 !important;
}

    .rz-colorpicker-popup {
        right: 0 !important;
        left: unset !important;
    }

    .rz-colorpicker-value {
        width: 5.5rem !important;
    }

    .rz-chart {
        margin-top: -30px;
    }

.rz-slider-handle {
    border: 0.25rem solid var(--admin-blue-color) !important;
    background-color: var(--admin-white-color) !important;
}

    .e-richtexteditor .e-rte-container, .e-image-editor {
        border-radius: 4px !important;
        border: 1px solid var(--admin-lightgrey-color) !important;
    }

.rz-button .rz-button-box {
    vertical-align: middle !important;
}


/* Error UI */
#blazor-error-ui {
    color-scheme: light only;
    background-color: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

        #blazor-error-ui .dismiss {
            cursor: pointer;
            position: absolute;
            right: 0.75rem;
            top: 0.5rem;
        }

    .blazor-error-boundary {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
    }

        .blazor-error-boundary::after {
            content: "An error has occurred."
        }

    .rz-button-md {
        text-transform: none !important;
        width: fit-content;
    }

    /*Content*/
    /*Rich text Component*/
    .rte-component {
        max-width: 90vW;
        width: 100% !important;
    }


    .rte-markup-container img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .hover-border {
        position: relative;
        transition: border 0.3s ease-in-out;
    }

        /* Show border only when NOT in edit mode */
        .hover-border:not(.edit-mode):hover {
            border: 2px solid #007bff;
        }

    .edit-button {
        position: absolute;
        top: -2px;
        left: -2px;
        z-index: 99;
    }

    .leave-button {
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 99;
    }

    /* Hide buttons by default */
    .hover-button {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    /* Show buttons on hover */
    @media (hover: hover) {
        .hover-border:hover .hover-button {
            opacity: 1;
        }
    }

    /* Always show buttons on mobile */
    /*@media (max-width: 1024px) {
    .hover-button {
        opacity: 1;
    }
}*/


    /*picture Gallery Config*/
    .hide-header thead {
        display: none;
    }

    .sidebar-grid {
        width: calc(var(--admin-panel-width) - 2rem);
        height: 50vH;
        max-height: fit-content;
    }

    .gallery-grid-container {
        position: relative;
    }

    .gallery-grid-button {
        position: absolute;
        top: 3px;
        right: 3px;
    }

    .image-gallery-grid {
        max-width: calc(var(--admin-panel-width) - 4.5rem);
        max-height: 75px;
        display: block;
        margin: auto;
        object-fit: cover;
    }

    .description-gallery-grid {
        width: calc(var(--admin-panel-width) - 4.5rem);
        max-width: calc(var(--admin-panel-width) - 4.5rem);
        display: block;
        margin: auto;
    }

    .gallery-grid-column {
        width: calc(var(--admin-panel-width) - 4.5rem);
        max-width: calc(var(--admin-panel-width) - 4.5rem);
    }


    /*picture Gallery Content*/
.picture-gallery-container {
    margin: 0 auto;
    max-width: 90vW;
    width: 100%;
    /*height: 100%;*/
}

    .carousel-image {
        display: block;
        margin: auto;
    }

    /*.carousel-image-size-small {
        width: 50%;
        height: 30vH;
    }

    .carousel-image-size-medium {
        width: 75%;
        height: 45vH;
    }

    .carousel-image-size-large {
        width: 100%;
        height: 60vH;
    }*/

.carousel-icon {
    font-size: 3.5rem !important;
    font-weight: bold !important;
    color: #1a1a1a;
    cursor: pointer;
    transition: color 0.3s ease;
    user-select: none !important;
}

    .carousel-icon:hover {
        color: #7a7a7a;
    }


.carousel-icon-round {
    font-size: 2.75rem !important;
    font-weight: bold;
    color: white !important;
    margin: auto !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    user-select: none !important;
    transition: background-color 0.3s ease;
}

    .carousel-icon-round:hover {
        background-color: rgba(0, 0, 0, 0.2) !important;
    }

.carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .indicator {
    background-color: #ECECEC;
    border-radius: 0.25rem;
    cursor: pointer;
    height: 3.5rem;
    margin: 0.5rem;
    width: 5rem;
}

.carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar.e-active .indicator {
    border: solid 2px Black;
}

.e-carousel .e-carousel-indicators {
    bottom: auto !important;
    position: relative !important;
}

    .picture-grid-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.8rem;
        width: 100%;
        justify-content: flex-start;
    }

    /*.picture-grid-image {
        object-fit: cover;
        width: 100%;
    }*/

    /*.picture-grid-image-size-small {
        flex: 1 1 20rem;
        height: 11rem;
        max-width: 100%;
    }

    .picture-grid-image-size-medium {
        flex: 1 1 38rem;
        height: 22rem;
        max-width: 100%;
    }

    .picture-grid-image-size-large {
        flex: 1 1 55rem;
        height: 31rem;
        max-width: 100%;
    }*/

    /*.carousel-image-size-small.round,
    .picture-grid-image-size-small.round {
        border-radius: 0.5rem;
    }

    .carousel-image-size-medium.round,
    .picture-grid-image-size-medium.round {
        border-radius: 0.8rem;
    }

    .carousel-image-size-large.round,
    .picture-grid-image-size-large.round {
        border-radius: 1.1rem;
    }*/

    .picture-card {
        display: flex;
        flex-direction: column;
        display: block;
        height: fit-content !important;
        margin: 0 auto
    }



    /*TextAndMedia*/
.text-media-container {
    display: flex;
    gap: 2rem !important;
    flex-wrap: nowrap;   
    justify-content: center;
    align-items: center;
}

.text-right {
    flex-direction: row;
}

.text-left {
    flex-direction: row-reverse;
}

.text-above {
    flex-direction: column-reverse;
}

.text-below {
    flex-direction: column;
}


.media-container.text-right,
.media-container.text-left {
    flex: 1 1 50%;
}

.media-container.text-right {
    margin: auto 1rem auto auto !important;
}

.media-container.text-left {
    margin: auto auto auto 1rem !important;
}

.media-container.text-above,
.media-container.text-below {
    flex: 1 1 50%;
    margin: auto;
}

.text-container.text-right,
.text-container.text-left {
    flex: 1 1 50%;
    overflow: auto;
}

.text-container.text-right {
    margin: auto auto auto 2rem !important;
}

.text-container.text-left {
    margin: auto 1rem auto auto !important;
}


.text-container.text-above,
.text-container.text-below {
    flex: 1 1 100%;
    margin: auto auto auto 0;
    align-self:flex-start !important;
}

.text-title * {
    font-size: calc(var(--design-font-size) + 0.5rem) !important;
    font-weight: bold;
   margin-bottom: 0rem;
}

.text-subtitle * {
    font-size: calc(var(--design-font-size) - 0.2rem) !important;
    opacity: 0.8;
}

.text-text * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: calc(var(--design-font-size) + 0.1rem) !important;
    background-color: transparent !important;
    background: transparent !important;
    margin: 0.2rem auto 0.2rem auto;
}


.text-title.text-right,
.text-subtitle.text-right,
.text-text.text-right,
.text-title.text-left,
.text-subtitle.text-left,
.text-text.text-left {
    max-width: 50vW;
}

.text-media-button {
    width: fit-content;
    margin: 1rem auto 0rem auto !important;
    min-width: 150px;   
}


.text-overlay {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    overflow: hidden;
}

    /* Ensure media fills the background */
    .text-overlay .media-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .text-overlay .text-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /*text-align: center;*/
        z-index: 2;
        /*margin: 1rem auto !important;*/
    }

        .text-overlay .text-container .text-text *,
        .text-overlay .text-container .text-title *,
        .text-overlay .text-container .text-subtitle * {
            color: white !important;
            text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black !important;
        }

    /* Optional: Ensure media is below text */
    .text-overlay .text-media-image,
    .text-overlay .text-media-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 1;
    }

@media (max-width: 768px) {
    .text-media-container.text-right {
        flex-direction: column;
    }

    .text-media-container.text-left {
        flex-direction: column-reverse;
    }

    .media-container.text-left,
    .media-container.text-right,
    .text-container.text-left,
    .text-container.text-right {
        margin: 1rem !important;
        flex: 1 1 100%;
    }
}


/*Contact Styles*/
.contact-container {
    margin: auto !important;    
}

.contact-container-info {
    max-width: 40rem;
}

.contact-container-send {
    max-width: 64.7rem;
}

.contact-grid-text {
    width: 16rem !important;
    max-width: 100% !important;   
}

/*ContactInfoStyles*/
.contactinfo-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.contactinfo-block {
    display: flex;
    flex-direction: column;
    flex: 1 1 15rem;
    max-width: 22rem;
    align-items: center;
    text-align: center;
}

.contactinfo-block-headline {
    font-size: var(--design-font-size);
    margin-bottom: 0.5rem;
    font-weight: bold;
    text-align: center;
}

.contactinfo-block-item {
    font-size: var(--design-font-size);
    text-align: center;
}

.contactinfo-block-item a {
    all: unset;
    cursor: pointer;
    text-decoration: none;
    text-decoration: underline;
    /*font-weight: 500;*/
}

.contactinfo-block-social-media-links {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

    .contactinfo-block-social-media-links a {
        all: unset;
        cursor: pointer;
    }



.contactinfo-icon {
    margin: 1rem auto 1rem auto !important;
    display: block !important;
    font-size: calc(var(--design-font-size) + 1.2rem) !important;
    font-weight: bold;
}

/*AccordionConfig*/
.text-header-sidebar-grid {
    width: calc(var(--admin-panel-width) - 6.3rem) !important;
    max-width: calc(var(--admin-panel-width) - 6.3rem) !important;
    display: block;
    margin: auto;
}

.text-child-sidebar-grid {
    width: calc(var(--admin-panel-width) - 3.3rem) !important;
    max-width: calc(var(--admin-panel-width) - 3.3rem) !important;
    margin: auto;
    cursor: text !important;
    overflow-x: hidden;
    white-space: normal;
    word-break: break-word;
}

/*AccordionComponent*/
.accordion-container {
    display: flex;
    gap: 2rem !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

    .accordion-container.accordion-text-above,
    .accordion-container.accordion-text-left {
        align-items: stretch; /* or use flex-start if you prefer left alignment */
        text-align: left; /* ensures inline text aligns left too */
    }

.accordion-text-left {
    flex-direction: row-reverse;
}

.accordion-text-above {
    flex-direction: column-reverse;
}


.accordion-accordion-container.accordion-text-left {
    flex: 1 1 50%;
    margin: auto auto auto 1rem !important;
}

.accordion-accordion-container.accordion-text-above {
    flex: 1 1 100%;
    margin: auto;
}


.accordion-text-container.accordion-text-left {
    flex: 1 1 50%;
    overflow: auto;
    margin: auto 1rem auto auto !important;    
}


.accordion-text-container.accordion-text-above {
    flex: 1 1 100%;
    margin: auto auto auto 0;
    align-self: flex-start !important;
}

.accordion-text-title * {
    font-size: calc(var(--design-font-size) + 0.5rem) !important;
    font-weight: bold;
    margin-bottom: 1rem;
}

.accordion-text-text * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: calc(var(--design-font-size) + 0.1rem) !important;
    background-color: transparent !important;
    background: transparent !important;
    margin: 0.2rem auto 0.2rem auto;
}

.accordion-text-title.accordion-text-left,
.accordion-text-text.accordion-text-left {
    max-width: 50vW;
}

.accordion-text-container.accordion-text-above,
.accordion-accordion-container.accordion-text-above {
    width: 100%;    
}

@media (max-width: 1024px) {
    .accordion-container.accordion-text-left {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .accordion-accordion-container.accordion-text-left,
    .accordion-text-container.accordion-text-left {
        margin: auto !important;
        flex: 1 1 100%;
    }

    .accordion-text-container.accordion-text-left,
    .accordion-accordion-container.accordion-text-left {        
        width: 100%;
    }

    .accordion-text-title.accordion-text-left,
    .accordion-text-text.accordion-text-left {
        max-width: 100%;
    }
}


.accordion-accordion-container,
.rz-accordion {
    border-radius: 0.3rem;
    --rz-accordion-toggle-icon-order: 1;
    --rz-accordion-item-border: var(--rz-border-base-200);
    /*border: 2px solid var(--design-color-navigation-background);*/
}

.rz-accordion-toggle-icon.rzi-chevron-right:before {
    content: "keyboard_arrow_down" !important;
}

.rz-accordion-toggle-icon.rzi-chevron-down:before {
    content: "keyboard_arrow_up" !important;
}




    .rz-accordion .rz-accordion-header > a {
        
        background-color: var(--design-color-navigation-background) !important;
        color: var(--design-color-navigation-font) !important;
    }

        .rz-accordion .rz-accordion-header > a span {
            font-size: var(--design-font-size) !important;
            font-weight: bold;
        }


.accordion-header {
    padding: 0.8rem !important;
    background-color: var(--design-color-navigation-background) !important;
    color: var(--design-color-navigation-font) !important;
    border-bottom: 1px solid var(--design-color-navigation-font);
    border-left: 2px solid var(--design-color-navigation-background);
    border-right: 2px solid var(--design-color-navigation-background);
}

.rz-accordion-content {
    border-left: 2px solid var(--design-color-navigation-background);
    border-right: 2px solid var(--design-color-navigation-background);   
}

.rz-accordion > div:last-child {
    border-bottom: 2px solid var(--design-color-navigation-background) !important;
}

.accordion-header :hover{
    background-color: var(--design-color-navigation-background) !important;
    color: var(--design-color-navigation-font) !important;
}

.accordion-child {
    padding: 0.5rem !important;
    background-color: var(--design-color-content-background) !important;
    color: var(--design-color-content-font) !important;
}

.rz-panel-menu {
    background-color: var(--design-color-navigation-background) !important;
}

.rz-data-grid-full-width {
    width: 100%;
}

.rz-fieldset-legend-text {
    font-weight: bold;
}


/* Container for everything */
.article-container {
    padding: 2rem;    
    margin: 0 auto;    
}

/* Header text style */
.article-text-title {
    font-size: calc(var(--design-font-size) + 0.5rem) !important;
    font-weight: bold;
    margin-bottom: 1rem;
}

/* Main text style */
.article-text-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: calc(var(--design-font-size) + 0.1rem) !important;
    background-color: transparent !important;
    background: transparent !important;
    margin: 0.2rem auto 0.2rem auto;
}

/* Grid container for article items */
.article-items-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 0fr));
    gap: 1.5rem;
}

/* Each article card */
.article-item-container {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .article-item-container:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

/* Image styling */
.article-item-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Title and text */
.article-item-title {
    font-size: calc(var(--design-font-size)) !important;
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.article-item-overview-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: calc(var(--design-font-size) - 0.1rem) !important;
    background-color: transparent !important;
    background: transparent !important;
    margin: 0.2rem auto 0.2rem auto;
}

/* Article view (when one is selected) */
.article {
    /*padding: 1rem;
    background: #f9f9f9;
    border-radius: 10px;*/
}
    /* Optional: Back button spacing */
    .article > .rz-button {
        margin-bottom: 1rem;
    }

.article-image {
    max-width: 100%;
    max-height: 20vH;
    object-fit: contain;
}


.article-readmore-link {
    display: inline-block;
    margin-top: 0.5rem;
    /*color: #007BFF;*/
    text-decoration: none;
    font-weight: 500;
}

    .article-readmore-link:hover {
        text-decoration: underline;
        cursor: pointer;
    }



   /* Table*/
.custom-table-container {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;    
}
    .custom-table.round {
        border-radius: 0.8rem;
        overflow: hidden;
    }

    .custom-table-head {
        background-color: var(--design-color-navigation-background) !important;
        color: var(--design-color-navigation-font) !important;
    }

.custom-table-header {
    padding: 0.8rem;
    text-align: left;
    background-color: var(--design-color-navigation-background) !important;
    color: var(--design-color-navigation-font) !important;
    font-weight: bold;
}

.custom-table-cell {
    padding: 0.8rem;
}

/* No gridlines */
.gridlines-none td,
.gridlines-none th,
.gridlines-none tr {
    border: none !important;
}

/* Vertical lines */
.gridlines-vertical td {
    border-right: 1px solid #ccc;
    border-top: none;
    border-bottom: none;
}

.gridlines-vertical td:last-child {
    border-right: none !important; 
}

/* Horizontal lines */
.gridlines-horizontal td {    
    border-bottom: 1px solid #ccc;
}
    
    .gridlines-horizontal td:first-child {
        border-left: none;
    }
    
    .gridlines-horizontal td:last-child {
        border-right: none;
    }
    
    .gridlines-horizontal tr:last-child td {
        border-bottom: none !important;
    }


/* Both vertical and horizontal */
.gridlines-both td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
    .gridlines-both td:first-child {
        border-left: none;
    }

    .gridlines-both td:last-child {
        border-right: none;
    }

    .gridlines-both tr:last-child td {
        border-bottom: none !important;
    }

/* Optional: remove double borders */
.custom-table th,
.custom-table td {
    box-sizing: border-box !important;
}

.alternating-rows tbody tr:nth-child(even) {
    background-color: var(--design-color-content-alternating-background);
}

.alternating-rows tbody tr:nth-child(odd) {
    background-color: var(--design-color-content-background);
}


.custom-table-border {
    border: 2px solid var(--design-color-navigation-background);
}

.custom-table:not(.custom-table-border) {
    border: none;
}

.custom-table.gridlines-vertical:not(.custom-table-border),
.custom-table.gridlines-horizontal:not(.custom-table-border),
.custom-table.gridlines-both:not(.custom-table-border) {
    border: 1px solid #ccc !important;
}