
    :root {
        --text: #565656;
--links: #0F79D0;
--titles: #000000;
--page-background: #e6f0f8;
--highlight: #0F79D0;
--boxes-background: #FFFFFF;
--boxes-border: #CBD2DB;
--section-titles: #FFFFFF;
--section-titles-background: #0069b4;
--header-background: #0069b4;
--header-links: #FFFFFF;
--footer-background: #0069b4;
--footer-links: #FFFFFF;
    }
    
/* ==========================================================================
   PORTAL HEADER & BRANDING
   ========================================================================== */

.portal-header-logo-container {
    height: 150px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    background-image: url('https://s3-eu-central-1.amazonaws.com/aws-ec2-eu-central-1-opendatasoft-staticfileset/kantongraubuenden/theme_image/titelbild.jpg');
    background-size: cover;
    background-position: center 5%;
    background-repeat: no-repeat;
}

.header-brand-title {
    display: flex;
    justify-content: flex-start;
}

.logoGR {
    height: 80px !important;
    width: 180px !important;
    object-fit: contain;
}

.ods-front-header__portal-brand {
    display: flex;
    height: 40px;
    position: relative;
    top: 0;
}

/* ==========================================================================
   LANGUAGE SWITCHER
   ========================================================================== */

.ods-front-footer__language a[hreflang="en"],
.ods-front-header__language a[ods-language-switcher="en"] {
    visibility: hidden;
    position: relative;
    display: inline-block;
}


.ods-front-header__language a[ods-language-switcher="en"]::after {
    content: "rm";
    font-size: 0.9rem;
    color: #ffffff;
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ods-front-footer__language a[hreflang="en"]::after {
    content: "rm";
    font-size: 0.9rem;
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   DESKTOP NAVIGATION
   ========================================================================== */

.ods-responsive-menu-collapsible__content {
    display: flex;
    align-items: center;
}

.ods-front-header__menu-item {
    position: relative;
}

.ods-front-header__menu-item-link--active {
    border-bottom: 0 solid;
    color: #ffffff;
    opacity: 1;
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.ods-front-header__menu {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   DROPDOWN MENU STYLES
   ========================================================================== */

/* Base dropdown styles */
li.dropdown-menu i {
    font-size: 1.2em;
    margin-left: 13.5px;
    color: #FFFFFF;
}

ul.dropdown-menu-submenu {
    display: none;
    margin: 0;
    padding: 22px 28px;
    list-style: none;
    background-color: #0069b4;
}

ul.dropdown-menu-submenu.dropdown-menu-submenu__active {
    display: inherit;
}

li.dropdown-menu-submenu-item {
    margin-bottom: 26px;
}

li.dropdown-menu-submenu-item:last-child {
    margin-bottom: inherit;
}

/* Desktop dropdown positioning */
.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) ul.dropdown-menu-submenu {
    position: absolute;
    top: 55px;
    left: 1px;
    z-index: 1001;
    filter: drop-shadow(0 14px 8px rgba(37, 48, 59, 0.1));
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .custom-menu-item-submenu {
    width: auto !important;
    top: 55px !important;
    left: 1px !important;
    padding: 20px !important;
    filter: drop-shadow(0 0 8px rgba(37, 48, 59, 0.2)) !important;
}

.ods-responsive-menu-collapsible:not(.ods-responsive-menu-collapsible--collapsed) .ods-front-header__menu .dropdown-menu-submenu a {
    white-space: nowrap;
}

/* ==========================================================================
   DROPDOWN LINK ANIMATIONS
   ========================================================================== */

.dropdown-menu-submenu-item a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    padding: 12px 16px;
    margin: 4px 0;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Shine effect background */
.dropdown-menu-submenu-item a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

/* Hover state */
.dropdown-menu-submenu-item a:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left: 3px solid #ffffff;
}

.dropdown-menu-submenu-item a:hover::before {
    left: 100%;
}

/* Focus state for accessibility */
.dropdown-menu-submenu-item a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    border-left: 3px solid rgba(255, 255, 255, 0.8);
}

/* Active state */
.dropdown-menu-submenu-item a:active {
    transform: translateX(6px) scale(0.98);
    transition-duration: 0.1s;
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================== */

.ods-responsive-menu-placeholder.ods-responsive-menu-placeholder--active {
    height: 100%;
    display: flex;
    align-items: center;
}

.ods-responsive-menu--collapsed .ods-responsive-menu-collapsible__content {
    align-items: flex-start;
    flex-direction: column;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__logo {
    display: none;
}

.ods-responsive-menu-collapsible--collapsed .ods-front-header__menu,
.ods-responsive-menu-collapsible--collapsed .ods-front-header__management-menu {
    width: 100%;
}