#header {
    width: 100%;
    max-width: 100vw;
}

#top-header-wrp {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 36px;
    overflow: hidden;
    background-color: var(--color-gray-5);
    color: var(--color-white);
    font-family: "roboto-v51-latin";
    font-size: var(--typo-small-fs);
    line-height: 1;
}

#color-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0) 80%,
        rgba(0, 0, 0, 0.87)
    );
}

#head-lauftext {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    padding-bottom: 2px;
    color: var(--color-white);
    transform: translateY(-50%);
    will-change: transform;
}

#head-lauftext span {
    display: inline-block;
    white-space: nowrap;
}

#head-teaser-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 40px);
    padding-right: 6vw;
    padding-left: 6vw;
    color: var(--color-white);
    text-align: center;
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.94) 66%,
        rgba(0, 0, 0, 0)
    );
    transform: translate(-50%, -50%);
}

#head-teaser-txt p {
    margin: 0;
    color: var(--color-white);
    white-space: nowrap;
}

#head-teaser-txt a {
    color: var(--color-white);
}

#head-teaser-txt .teaser-txt,
#head-teaser-txt .teaer-txt {
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.gastfreund a{
    font-size: clamp(18px, 1.35vw, 22px)!important;
    margin-top: 40px;
    font-weight:600!important;
}