:root {
    --very-small-width: 500px;
    --smaller-width: 850px;
    --content-width: 1160px;
    --extended-width: 1400px;
    --full-width: 100%;
}

@media only screen and (max-width: 1400px) {
    :root {
        --extended-width:100%;
    }
}

@media only screen and (max-width: 1250px) {
    :root {
        --content-width:100%;
    }
}

@media only screen and (max-width: 850px) {
    :root {
        --smaller-width:100%;
    }
}

@media only screen and (max-width: 500px) {
    :root {
        --very-small-width:100%;
    }
}

body,html {
    padding: 0;
    margin: 0;
    font-size: 20px;
    line-height: 1.6;
    overflow-x: hidden;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;

    & li {
        margin: 4px 0;
        padding: 0 0 0 1.2em;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 0.65em;
            height: 0.65em;
            left: 0;
            top: 0.55em;
            border-radius: 0;
            background: var(--_link-text-color);
        }
    }
}

nav ul, ul.no-style {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li::before, ul.no-style li::before {
    display: none;
}

nav ul li, ul.no-style li {
    padding: unset;
    margin: unset;
}

.icon.bubbled {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 3px solid;
    display: flex;
    justify-content: center;
    align-items: center
}

.icon.bubbled svg {
    width: 25px;
    height: 25px;
}

.icon.small {
    width: 40px;
    height: 40px;
}

.icon.small svg {
    width: 20px;
    height: 20px;
}

.ao_overlay > .ao_overlay_shadow {
    background: var(--debug)
}

.ao_overlay > .ao_overlay_content > .ao_overlay_closer:before,
.ao_overlay > .ao_overlay_content > .ao_overlay_closer:after {
    background: var(--debug)
}

iframe.maps {
    width: 100%;
    aspect-ratio: 16/9;
}

h1 {
    font-size: 3.3em;
    line-height: normal;
}

h2 {
    font-size: 2.2em;
    line-height: 1.3
}

h3 {
    font-size: 1.6em;
    line-height: 1.3
}

h4 {
    font-size: 1.3em;
    line-height: 1.3;
}

h5 {
    font-size: 1.1em;
    line-height: 1.5;
}

h1,h2,h3,h4,h5 {
    hyphens: auto;
}

.small {
    font-size: 0.9em;
    line-height: 1.3;
}

header {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    font-size: 16px;
    line-height: 1.2;
    will-change: padding;
    transition: 0.5s padding;
}

header > input#navigation-opener,
header > label,
header > .mainnav-control {
    display: none;
}

header .ao_basics_col.logo.mobile {
    display: none
}

header a {
    color: #fff;
    text-decoration: none;
}

header a.active {
    color: var(--green);
}

header #mainnav a {
}

header .ao_basics_col.logo {
    width: auto;
    position: relative;
    display: block;
}

header .ao_basics_col.logo svg {
    /* position:absolute; */
    /* top: -55px; */
    width: 287px;
    height: 33px;
    transition: 0.5s all;
    display: block;
}

.scrolled header .ao_basics_col.logo svg {
    width: 165px;
    height: 19px;
}

header .logo .scrolled {
    width: 248px;
    height: 43px;
    opacity: 0;
}

.scrolled header {
    background: var(--blue);
}

.scrolled header .logo.top {
    opacity: 0;
}

.scrolled header .logo.scrolled {
    opacity: 1;
}

header #mainnav div.menu {
    display: flex;
    gap: 40px;
}

header #mainnav div.ao_basics_col {
    & > div {
        position: relative;
        cursor: pointer;
        margin: 12px -10px 0;
    }

    & > a {
        position: relative;
        display: block;

        &::before {
            content: "";
            position: absolute;
            bottom: -12px;
            left: 50%;
            right: 50%;
            height: 6px;
            background: var(--green);
            transition: 0.3s left, 0.3s right;
        }
    }

    &:hover {
        & > a {
            &::before {
                left:-10px;
                right: -10px;
            }
        }
    }
}

.scrolled header #mainnav div.ao_basics_col {
    & > a::before {
        bottom: -17px;
    }

    & > div > ul {
        padding-top: 5px;
    }
}

header #mainnav {
    padding-top: 22px
}

header #mainnav ul {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    transform: translateY(-5000px);
    transition: 0.5s opacity;
    min-width: 100%;
}

header #mainnav ul li {
    background: var(--white);
    white-space: nowrap;
}

header #mainnav ul li a {
    color: var(--black);
    padding: 10px 10px;
    display: block
}

header #mainnav ul li:hover {
    background: var(--green);
}

header #mainnav ul li:hover a {
    color: var(--black);
}

header #mainnav ul li:hover a.active {
    color: var(--blue);
}

header #mainnav div.ao_basics_col:hover ul {
    transform: none;
    opacity: 1;
}

header.alwayssticky {
    position: fixed;
    /* box-shadow: 0px -4px 10px 3px rgb(0 0 0 / 30%); */
}

header.alwayssticky .ao_basics_col.logo .top {
    display: none;
}

header.alwayssticky .ao_basics_col.logo .scrolled {
    opacity: 1;
    position: relative;
    color: var(--debug)
}

header.alwayssticky #mainnav {
    align-items: center;
    padding: 45px 0 28px;
    will-change: padding;
    transition: 0.5s padding;
}

header.alwayssticky #mainnav .menu {
    position: relative;
    top: 13px;
}

.scrolled header.alwayssticky #mainnav {
    padding: 20px 0 18px;
}

header .searchform {
    position: relative;

    & .searchicon {
        width: 18px;
        height: 18px;
        cursor: pointer;
        position: relative;
        z-index: 10;
    }

    & .tx-indexedsearch-form {
        position: absolute;
        right: -9px;
        top: -10px;
        width: 50px;
        transition: 0.5s all;
        opacity: 0;

        & input {
            border-radius: 20px;
            padding: 8px 30px 8px 10px;
            margin: 0;
            border: 3px solid var(--blue);
            width: 100%;
            box-sizing: border-box;
            outline: 1px solid #fff;
        }
    }

    & .tx-indexedsearch-search-submit {
        display: none;
    }

    &:hover {

        & .tx-indexedsearch-form {
            width: 300px;
            opacity: 1;
        }

        & .searchicon {
            color: var(--blue)
        }
    }
}

#mood {
    position: relative;
}

#mood.alwayssticky {
    transition: 0.5s margin-top;
    will-change: margin-top;
}



#mood .stoerer {
    position: absolute;
    top: 280px;
    background: #ffffffde;
    padding: 35px 45px;
    color: var(--debug);
    max-width: 300px;
    box-sizing: border-box;
}

.ce-gallery figure.image {
    position: relative;
}

.ce-gallery figure.image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.ce-gallery figure.image > a {
    position: relative;
    z-index: 1
}

.ce-gallery figure.clickable::after {
    display: none;
}

.in {
    animation: k 1s forwards;
}

.out {
    animation: k 1s forwards;
    animation-direction: reverse;
}

@keyframes fadeIn {
    0% {
        transform: translateX(0px);
        ;opacity: 1;
    }

    100% {
        transform: translateX(-200px);
        opacity: 0;
    }
}

.fadeIn .fader {
    opacity: 0;
    transform: translate(-20000px);
    transition-property: opacity, transform;
    transition-duration: 0.5s, 0s;
    transition-delay: 0s, 0.5s;
}

.fadeIn:hover .fader {
    opacity: 1;
    transform: none;
    transition-delay: 0s, 0s;
}

footer {
    font-size: 1em;
    background: var(--white);
    position: relative;
}

footer .ao_basics_grid {
    padding: 50px 0;
    flex-wrap: wrap;
}

footer a.logo {
    display: block
}

footer a.logo svg {
    width: 210px;
    height: 24px;
}

footer a {
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    display: inline-block;
}

.scrolled header::before {
    height: 0;
}

@media only screen and (max-width: 1250px) {
    header {
        position: relative;
        top: 0;
        right: 0;
        margin: 0;
        z-index: 100;
        width: auto;
        -webkit-user-select: none;
        user-select: none;
        padding: 20px 40px 20px;
        background: var(--blue);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header.alwayssticky #mainnav {
        height: auto;
    }

    header > input#navigation-opener {
        display: block;
        width: 47px;
        height: 42px;
        position: absolute;
        top: 35px;
        right: 30px;
        cursor: pointer;
        opacity: 0;
        z-index: 2;
        -webkit-touch-callout: none
    }

    .scrolled header > input#navigation-opener {
        top: 24px;
    }

    header > label {
        font-size: 0;
        line-height: 0;
        position: absolute
    }

    header span.mainnav-control {
        display: block;
        width: 33px;
        height: 4px;
        margin: 0 0 5px auto;
        position: relative;
        background: var(--white);
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0;
        transition: transform .5s cubic-bezier(.77,.2,.05,1),background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease
    }

    header span.mainnav-control:nth-last-child(1) {
        margin: 0;
    }

    header > input#navigation-opener:checked ~ #mainnav-control > span.mainnav-control {
        opacity: 1;
        transform: rotate(45deg) translate(4px,-4px);
    }

    header > input#navigation-opener:checked ~ #mainnav-control > span.mainnav-control:nth-last-child(2) {
        opacity: 0;
        transform: rotate(0) scale(.2,.2)
    }

    header > input#navigation-opener:checked ~ #mainnav-control > span.mainnav-control:nth-last-child(1) {
        transform: rotate(-45deg) translate(2px,2px)
    }

    header .ao_basics_col.logo.mobile {
        display: block
    }

    header .ao_basics_col.logo.desktop {
        display: none
    }

    header .ao_basics_col.logo.mobile svg {
        /* position:absolute; */
        /* top: -31px; */
        width: 194px;
        height: 79px;
        transition: 0.5s all;
    }

    .scrolled header .ao_basics_col.logo.mobile svg {
        top: -31px;
        width: 140px;
        height: 57px;
    }

    header > #navs {
        top: 0;
        position: absolute;
        right: 0;
        width: 100%;
        max-width: 500px;
        background: #fff;
        padding: 20px 0 20px 0;
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        box-shadow: 0 0 10px 0 #00000030;
        transition: transform .5s cubic-bezier(.04,.52,.45,1.01);
        transform: translate(0,-110%);
        max-height: 100vh;
        overflow-y: auto;
    }

    header > input#navigation-opener:checked~#navs {
        transition: transform .5s cubic-bezier(.77,.2,.05,1);
        transform: translate(0,119px);
    }

    .scrolled header > input#navigation-opener:checked~#navs {
        transition: transform .5s cubic-bezier(.77,.2,.05,1);
        transform: translate(0,97px);
    }

    header > #navs > #mainnav {
        display: block;
        padding:0;
    }

    header > #navs > #mainnav a {
        color: var(--black);

        &::before{display:none}
        &:hover{
            background:var(--blue);
            color: var(--white);
        }
    }

    header > #navs > #mainnav li:hover {
        background:var(--blue);

        & > a {
            color: var(--white);
        }
    }

    header > #navs > #mainnav div.menu {
        flex-direction: column;
        gap: 0;
        top:auto;
    }

    header > #navs > #mainnav div.menu > div.ao_basics_col > a {
        padding: 12px 22px;
        display: block;
    }

    header > #navs > #mainnav div.menu > div.ao_basics_col > div {
        overflow: hidden;
        max-height: 0;
        transition: max-height 2s,padding 2s;
        background: var(--grey-light);
        box-shadow: inset 0 0 11px -7px rgb(0 0 0 / 70%);
        margin: 0;
        border-bottom: none;
    }

    header > #navs > #mainnav div.menu > div.ao_basics_col:hover > div {
        max-height: 500px;
        padding: 10px 0;
        transition: max-height 0.5s,padding 0.5s;
    }

    header > #navs > #mainnav div.menu > div.ao_basics_col > div > ul {
        position: relative;
        transform: none;
        opacity: unset;
        padding-left: 10px;
        transition: none;
        background: none;
        border: 0;
    }

    header > #navs > #mainnav div.menu > div.ao_basics_col > div > ul > li {
        background: none;
    }

    header > #navs > #mainnav div.menu > div.ao_basics_col > div > ul > li:hover {
        background: var(--blue);
        color: var(--white);
    }

    header > #navs > #mainnav div.menu > .searchform {
        order: -1;
        padding: 12px 22px;
    }

    header > #navs > #mainnav div.menu > .searchform > form {
        position: relative
    }

    header > #navs > #mainnav div.menu > .searchform > form .tx-indexedsearch-form {
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        opacity: 1;
    }

    header > #navs > #mainnav div.menu > .searchform > form .searchicon {
        position: absolute;
        right: 13px;
        top: 12px;
        color: var(--blue);
    }

    #mood.alwayssticky {
        margin-top: 117px;
    }

    footer > div {
        padding: 0 40px;
    }

    footer > div .ao_basics_grid {
        flex-wrap: wrap
    }

    footer > div .ao_basics_col {
        max-width: 30%
    }
}

@media only screen and (max-width: 900px) {
    footer > div .ao_basics_col {
        max-width:46%
    }
}

@media only screen and (max-width: 650px) {
    footer > div > .ao_basics_grid.bg-white {
        flex-wrap: wrap
    }

    body,html {
        font-size: 16px;
    }
}

@media only screen and (max-width: 600px) {
    footer > div {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 550px) {
    footer > div .ao_basics_col {
        max-width:100%
    }
}

@media only screen and (max-width: 420px) {
    header {
        padding: 20px 20px 18px;
    }

    .scrolled header {
        padding: 10px 20px;
    }

    header > input#navigation-opener {
        right: 10px;
    }

    header > input#navigation-opener:checked~#navs {
        transition: transform .5s cubic-bezier(.77,.2,.05,1);
        transform: translate(0,115px);
    }

    .scrolled header > input#navigation-opener:checked~#navs {
        transition: transform .5s cubic-bezier(.77,.2,.05,1);
        transform: translate(0,76px);
    }
}

a[href^="https://www.arts-others.de"] {
    background: red;
    border: 3px solid red;
}