/*-------------------------------------------- Anfang: Grundlagen --------------------------------------------*/
html {
    width: 100%;
    max-width: 1930px;
    margin: 0 auto;
}

body {
    margin: 0;
    background: #eeebe6;
    color: #4d4d4d;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
}

a {
    color: #1d557c;
}

a:is(:hover, :focus-visible) {
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid #1d557c;
    outline-offset: 3px;
}

#maindiv {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 0;
    background: #d9d2c2;
    background-size: 102.880658% 1px;
}

.page-columns {
    position: relative;
    display: grid;
    margin-top: -10.618557%;
    grid-template-columns: 25.102881% minmax(0, 55.246914%) 19.650205%;
    align-items: stretch;
    background-size: 102.880658% auto;
}

h1, .h1, .legacy_h1,
h2, .h2, .legacy_h2,
h3, .h3, .legacy_h3,
h4, .h4, .legacy_h4,
h5, .h5, .legacy_h5,
h6, .h6, .legacy_h6,
.h4link a:is(:link, :hover, :focus, :visited) {
    color: #1d557c;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.15;
}

h1, .h1, .legacy_h1 {
    margin-top: 10px;
    margin-bottom: 0.67em;
    font-size: clamp(1.25rem, 2.2vw, 1.375rem);
    line-height: 1.5625rem;
}

h2, .h2, .legacy_h2 {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
}

h3, .h3, .legacy_h3 {
    font-size: clamp(1rem, 1.8vw, 1.125rem);
}

h4, .h4, .legacy_h4,
.h4link a:is(:link, :hover, :focus, :visited) {
    font-size: 1rem;
    font-weight: 700;
}

h5, .h5, .legacy_h5 {
    font-size: 0.875rem;
    font-weight: 700;
}

h6, .h6, .legacy_h6 {
    font-size: 0.75rem;
    font-weight: 700;
}

@media (max-width: 991px) {
    #maindiv {
        padding: 0 10px;
        background: #d9d2c2;
    }

    .page-columns {
        grid-template-columns: minmax(0, 1fr) 191px;
        margin-top: 0;
        background: none;
    }
}

@media (max-width: 767px) {
    .page-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*-------------------------------------------- Ende: Grundlagen --------------------------------------------*/

/*-------------------------------------------- Anfang: Kopf --------------------------------------------*/
#header {
    padding: 0;
}

#header a,
#header img {
    display: block;
    width: 100%;
}

#header img {
    height: auto;
    aspect-ratio: 970 / 465;
}

@media (max-width: 991px) {
    #header {
        padding: 0;
    }
}

/*-------------------------------------------- Ende: Kopf --------------------------------------------*/

/*-------------------------------------------- Anfang: Navigation --------------------------------------------*/
#left {
    min-width: 0;
    padding: 50px 22px 20px 0;
}

#menu ul {
    padding: 0;
    list-style: none;
}

#menu li {
    position: relative;
    float: none;
}

#menu .navbar-nav {
    width: 100%;
    margin: 0;
}

#menu .navbar-nav>li {
    margin-top: 3px;
}

#menu .navbar-nav>li>a::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 18px;
    border-bottom: 1px dotted #8c827d;
}




#menu .navbar-nav>li>a {
    min-height: 30px;
    padding: 0 28px 0 36px;
    color: #1d557c;
    font-size: 0.8125rem;
    line-height: 30px;
}



#menu .navbar-nav>li>a::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    width: 3px;
    height: 3px;
    border: 1px solid #746f65;
    background: #cac2b2;
}

#menu li:is(:hover, :focus-within, .open, [class*='_over'])>a {
    color: #1d557c;
    font-weight: 700;
}

#menu a:is(:hover, :focus-visible) {
    color: #1d557c;
    text-decoration: none;
}

#menu li:is(:hover, :focus-within, .open, [class*='_over'])>a::before {
    width: 5px;
    height: 5px;
    left: 23.5px;
}

#menu .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 3px 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#menu .dropdown-menu a {
    padding: 2px 28px 2px 39px;
    color: #1d557c;
    font-size: 0.75rem;
    line-height: 17px;
}

#menu .dropdown-menu a[class*="secondlevel"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 27px;
    width: 3px;
    height: 3px;
    background: #8e827c;
    transform: translateY(-50%);
}

#menu li[class*="secondlevel"]:is(:hover, :focus-within, .open, [class*="_over"])>a,
#menu a[class*="secondlevel"]:is(:hover, :focus-visible) {
    color: #1d557c;
    font-weight: 700;
}

#menu li[class*="secondlevel"]:is(:hover, :focus-within, .open, [class*="_over"])>a::before,
#menu a[class*="secondlevel"]:is(:hover, :focus-visible)::before {
    background: #039ad3;
}

#menu ul ul ul a {
    padding-left: 49px;
}


#menu .dropdown-toggle-button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

#menu .dropdown-toggle-button::before,
#menu .dropdown-toggle-button::after {
    content: '';
    position: absolute;
    top: 12px;
    right: auto;
    bottom: auto;
    left: 8px;
    width: 10px;
    height: 2px;
    background: #1d557c;
    transform: none;
    transition: none;
}

#menu .dropdown-toggle-button::after {
    transform: rotate(90deg);
}

#menu .dropdown-toggle-button-open::after {
    opacity: 0;
}

#burgerButton,
#menu .menu-backdrop {
    display: none;
}

@media (min-width: 992px) {
    #myNavbar.collapse {
        display: block;
    }
}

@media (max-width: 991px) {
    html {
        scrollbar-gutter: stable;
    }

    body:has(#burgerButton[aria-expanded="true"], #myNavbar.collapsing) {
        overflow: hidden;
    }

    #left {
        grid-column: 1 / -1;
        padding: 0;
    }

    #burgerButton {
        display: block;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 1202;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 1px solid #1d557c;
        border-radius: 0;
        background: #f3f0ed;
        color: #1d557c;
        cursor: pointer;
    }

    #burgerButton .menu-label {
        display: none;
    }

    #burgerButton::before,
    #burgerButton::after,
    #burgerButtonInner {
        content: '';
        position: absolute;
        top: 20px;
        left: 10px;
        width: 22px;
        height: 2px;
        background: #1d557c;
        transition: transform 250ms ease, opacity 180ms ease;
    }

    #burgerButton::before {
        transform: translateY(-7px);
    }

    #burgerButton::after {
        transform: translateY(7px);
    }

    #burgerButton[aria-expanded="true"]::before {
        transform: rotate(45deg);
    }

    #burgerButton[aria-expanded="true"]::after {
        transform: rotate(-45deg);
    }

    #burgerButton[aria-expanded="true"] #burgerButtonInner {
        opacity: 0;
    }

    #menu .menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1200;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 300ms ease, visibility 0ms linear 300ms;
    }

    #myNavbar,
    #myNavbar.collapsing,
    #myNavbar.navbar-collapse.collapse {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1201;
        width: min(360px, calc(100% - 76px));
        height: 100dvh !important;
        max-height: 100dvh;
        padding: 72px 18px 30px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #d9d2c2;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-100%);
        transition: transform 300ms ease, visibility 0ms linear 300ms;
    }

    #menu:has(> #burgerButton[aria-expanded="true"]) #myNavbar {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition-delay: 0ms;
    }

    #menu:has(> #burgerButton[aria-expanded="true"]) .menu-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0ms;
    }

    #menu .navbar-nav>li>a {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 20px;
        font-size: 0.875rem;
    }

    #menu .dropdown-menu a {
        min-height: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 0.875rem;
    }

    #menu .dropdown-toggle-button-wrapper,
    #menu .dropdown-toggle-button-wrapper2 {
        display: block;
        top: 0;
        right: 0;
    }

    #menu .dropdown-toggle-button {
        width: 36px;
        height: 40px;
    }

    #menu .dropdown-toggle-button::before,
    #menu .dropdown-toggle-button::after {
        top: 20px;
        left: 13px;
    }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {

    #myNavbar,
    #myNavbar.collapsing,
    #myNavbar.navbar-collapse.collapse,
    #menu .menu-backdrop,
    #burgerButton::before,
    #burgerButton::after,
    #burgerButtonInner {
        transition: none;
    }
}

@media (max-width: 991px) {

    #menu .navbar-nav>li>a::before {
        left: 6px;
    }

    #menu .navbar-nav>li>a::after {
        left: 0;
    }

    #menu .navbar-nav>li>a {
        padding: 10px 0 10px 20px;
    }
}


/*-------------------------------------------- Ende: Navigation --------------------------------------------*/

/*-------------------------------------------- Anfang: Vernetzt --------------------------------------------*/
.network {
    margin: 33px 0 0 18px;
    padding: 14px 6px;
    border-top: 1px dotted #8c827d;
    border-bottom: 1px dotted #8c827d;
}

.network #vernetzt-helper {
    width: 100%;
    gap: 8px;
    color: #4d4d4d;
    font-size: 0.625rem;
    line-height: 1.4;
}

.network #vernetzt-helper img {
    width: 48px;
    height: auto;
    margin-right: 0;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .network {
        max-width: 244px;
        margin: 15px 0 0;
    }
}

/*-------------------------------------------- Ende: Vernetzt --------------------------------------------*/

/*-------------------------------------------- Anfang: Inhalt --------------------------------------------*/
#content {
    min-width: 0;
    min-height: 499px;
    padding: 0 18.5px 25px;
    background: linear-gradient(to bottom, #f5f1eede, #f5f1ee);
    line-height: 1.5;
    padding-top: 5px;
}

#content.use-hyphens {
    hyphens: manual;
}

#content .template-page>.row {
    width: auto;
    max-width: none;
}

#content .tiny_p {
    margin: 0;
}

#aboveContent:empty {
    display: none;
}

#content_footer {
    font-size: 0.6875rem;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    #content {
        min-height: 0;
        padding: 5px 15px 25px;
    }
}

/*-------------------------------------------- Ende: Inhalt --------------------------------------------*/

/*-------------------------------------------- Anfang: Schriftgroesse --------------------------------------------*/
#style {
    position: relative;
    min-height: 48px;
    margin-bottom: 6px;
    padding: 6px 8px 6px 37px;
    border: 1px solid #e9e6e1;
    border-radius: 2px;
    background: linear-gradient(to bottom, #f5f1eed9, #fff);
    color: #645954;
    font-size: 0.75rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

#style::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 9px;
    width: 24px;
    height: 24px;
    background: url('../img/search.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
}

#style button {
    white-space: nowrap;
    background: transparent;
    border: none;
    padding: 0;
}

#style strong {
    color: #1d557c;
    margin-top: 3px;
    margin-bottom: 3px;
    display: block;
}

/*-------------------------------------------- Ende: Schriftgroesse --------------------------------------------*/

/*-------------------------------------------- Anfang: Wetter --------------------------------------------*/
#right {
    min-width: 0;
    padding: 0 10px 20px;
}

#wetter {
    min-height: 284px;
    padding: 10px 9px;
    border: 1px solid #e9e6e1;
    border-radius: 2px;
    background: #f3f0ed;
    color: #645954;
}

#weather-title {
    margin: 0 0 3px;
    color: #1d557c;
    font: 700 0.75rem/1.5 Arial, sans-serif;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    #right {
        padding: 15px 0;
    }

    #wetter {
        min-height: 120px;
    }
}

/*-------------------------------------------- Ende: Wetter --------------------------------------------*/

/*-------------------------------------------- Anfang: Fusszeile --------------------------------------------*/
#footer {
    min-height: 35px;
    padding: 0 19.650205% 0 25.102881%;
    background: url('../img/bg_footer.jpg') no-repeat 53.571428% top;
    background-size: 102.880658% 35px;
    color: #8c827d;
    font-size: 0.75rem;
}

#footer .footer_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer .footer_list a {
    color: #8c827d;
    line-height: 35px;
}

#footer .footer_list a:is(:hover, :focus-visible) {
    color: #1d557c;
}

@media (max-width: 991px) {
    #footer {
        padding: 0 15px;
        background: none;
    }
}



/*-------------------------------------------- Ende: Fusszeile --------------------------------------------*/