#oben {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    /* padding: 0.9rem calc((100% - var(--content-width)) / 2); */
    padding: 15px 10px;
    background: var(--farbe4);
    box-shadow: 0 0 5px var(--farbe7);
}

#oben>.frame {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

#oben>.frame,
#oben>.frame :is(h1, h2, h3, p, a) {
    color: var(--farbe1);
    font-family: Georgia, 'Times New Roman', serif;
    hyphens: auto;
}

#oben>.frame .rahmen {
    width: auto;
    margin: 0;
    padding: 0;
}

#oben>.frame .ce-gallery,
#oben>.frame .ce-row,
#oben>.frame .ce-column,
#oben>.frame figure {
    margin: 0;
}

#oben>.frame img {
    width: auto;
    max-height: 64px;
    object-fit: contain;
}

#oben>.frame-type-textmedia .ce-textpic {
    display: flex;
    align-items: center;
    gap: 20px;
}

#oben>.frame-type-textmedia .ce-bodytext p {
    margin: 0;
    line-height: normal;
}

#oben .hauptnavibox {
    flex: 1;
    min-width: 0;
}

.hauptnavibox {
    display: flex;
    justify-content: flex-end;
}

.hauptnavi {
    position: relative;
    width: 100%;
    max-width: 760px;
}

.hauptnavi__toggle {
    display: none;
}

.hauptnavi__toggleLabel {
    display: none;
}

.hauptnavi__list,
.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hauptnavi__list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.nav-item {
    position: relative;
}

.nav-link,
.hauptnavi :where(a, .nav-link),
.hauptnavi__list .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    color: var(--farbe1);
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    width: 0;
    height: 3px;
    background: var(--gradient1);
    position: absolute;
    bottom: 10px;
    left: 0.75rem;
    transition: var(--standardtransition);
}

.hauptnavi :where(a, .nav-link):hover,
.hauptnavi :where(a, .nav-link):focus,
.nav-link:hover,
.nav-link:focus-visible {
    color: var(--farbe1);
}

.hauptnavi :where(a, .nav-link):hover::after,
.hauptnavi :where(a, .nav-link):focus::after,
.nav-link:hover::after,
.nav-link:focus-visible::after,
.hauptnavi .active>.nav-link::after,
.hauptnavi .active>a::after,
.hauptnavi .act>.nav-link::after,
.hauptnavi .act>a::after {
    width: calc(100% - 1.5rem);
}

.nav-link[aria-current="page"] {
    background: var(--farbe4);
    color: var(--farbe2);
    box-shadow: inset 0 0 0 1px var(--farbe7);
}

.dropdown-toggle::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    min-width: 220px;
    padding: 0.45rem;
    background: var(--farbe1);
    border: 1px solid var(--farbe7);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px var(--farbe7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.dropdown:hover>.dropdown-menu,
.dropdown:focus-within>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    padding: 0.65rem 0.8rem;
    border-radius: 6px;
    font-weight: 500;
}

.hauptnavi .active>.nav-link,
.hauptnavi .active>a,
.hauptnavi .act>.nav-link,
.hauptnavi .act>a {
    color: var(--farbe2);
}

.mob_button {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: var(--farbe4);
    color: var(--farbe1);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--farbe7);
}

.mob_button span {
    position: relative;
    display: inline-block;
    width: 1.2rem;
    height: 2px;
    background: currentColor;
}

.mob_button span::before,
.mob_button span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1.2rem;
    height: 2px;
    background: currentColor;
    transition: var(--standardtransition);
}

.mob_button span::before {
    top: -0.35rem;
}

.mob_button span::after {
    top: 0.35rem;
}

.hauptnavi:has(.hauptnavi__toggle:checked) label .mob_button span {
    background-color: transparent;
}
.hauptnavi:has(.hauptnavi__toggle:checked) label .mob_button span::before {
    transform: translateY(0.35rem) rotate(-45deg);
}
.hauptnavi:has(.hauptnavi__toggle:checked) label .mob_button span::after {
    transform: translateY(-0.35rem) rotate(45deg);
}
@media (max-width: 1050px) {
    #oben {
        align-items: center;
        flex-wrap: nowrap;
    }

    #oben>.frame {
        flex: 1 1 auto;
    }

    .hauptnavibox,
    .hauptnavi {
        display: flex;
        flex: 0 0 auto;
        justify-content: flex-end;
        align-items: center;
        width: auto;
        max-width: none;
    }

    .hauptnavi__toggleLabel {
        display: inline-flex;
        margin-right: 10px;
        cursor: pointer;
    }

    .navbox {
        position: absolute;
        top: 69px;
        right: -10px;
        z-index: 60;
        width: min(320px, calc(100vw - 20px));
        margin-top: 0;
        padding: 0.8rem;
        background: var(--farbe4);
        border: 1px solid var(--farbe7);
        border-radius: var(--radius);
        /* box-shadow: 0 20px 50px var(--farbe3); */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transform-origin: top right;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    .hauptnavi__toggle:checked+.hauptnavi__toggleLabel+.navbox {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .hauptnavi__list {
        display: grid;
        justify-content: stretch;
        gap: 0.25rem;
    }

    .nav-link {
        justify-content: flex-start;
        width: 100%;
        border-radius: 6px;
    }

    .dropdown-menu {
        position: static;
        min-width: 0;
        margin: 0.25rem 0 0.5rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--farbe7);
        border-radius: 0;
        background: none;
        padding: 0 0 0 0.75rem;
    }

    .hauptnavi :where(a, .nav-link),
    .hauptnavi__list .nav-link,
    .dropdown-menu :where(a, .nav-link) {
        color: var(--farbe1);
    }

    .hauptnavi :where(a, .nav-link):hover,
    .hauptnavi :where(a, .nav-link):focus,
    .dropdown-menu :where(a, .nav-link):hover,
    .dropdown-menu :where(a, .nav-link):focus {
        color: var(--farbe1);
    }

    /* .hauptnavi .active>.nav-link,
    .hauptnavi .active>a,
    .hauptnavi .act>.nav-link,
    .hauptnavi .act>a,
    .dropdown-menu .active>.nav-link,
    .dropdown-menu .active>a {
        color: var(--farbe4);
        background: var(--farbe1);
    } */
}

@media (max-width: 767.98px) {
    #oben {
        width: 100%;
    }

    #oben>.frame img {
        max-height: 52px;
    }

    .navbox {
        top: 63px;
        right: -10px;
    }
}