@font-face {
    font-family: 'urby-soft-thin';
    src: url('../fonts/Urby-Soft-Thin.woff') format('woff'),
    url('../fonts/Urby-Soft-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'urby-soft-light';
    src: url('../fonts/Urby-Soft-Light.woff') format('woff'),
    url('../fonts/Urby-Soft-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'urby-soft-regular';
    src: url('../fonts/Urby-Soft-Regular.woff') format('woff'),
    url('../fonts/Urby-Soft-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'urby-soft-bold';
    src: url('../fonts/Urby-Soft-Bold.woff') format('woff'),
    url('../fonts/Urby-Soft-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'urby-soft-black';
    src: url('../fonts/Urby-Soft-Black.woff') format('woff'),
    url('../fonts/Urby-Soft-Black.woff2') format('woff2');
}

:root {
    --primary: #FF5C29;
    --primary-rgb: 255, 92, 41;
    --light: #FAEDCF;
    --lightrgb: 250, 237, 207;
    --dark: #002F02;
    --darkrgb: 0, 47, 2;
    --darklighter: #053f07;
    --darkverylight: #7d8d68;
    --warn: #aa0606;
    --accent: #6e034c;
    --white: #FFFFFF;
    --boxborderradius: 1.5rem;
    --boxborderradius-small: .75rem;
    --shadow: 0 .1em 1em rgba(0, 0, 0, 0.1), 0 .2em 1.5em rgba(0, 0, 0, 0.05), .05em .05em .2em rgba(0, 0, 0, .3);
    --shadow-wide: 0 .1em 1em rgba(0, 0, 0, 0.05), 0 .2em 1.5em rgba(0, 0, 0, 0.1), .05em .05em .2em rgba(0, 0, 0, .05);
    --shadow-textarea: .02em .01em .3em rgba(0, 0, 0, 0.05) inset,
        0 0em .1em rgba(0, 0, 0, 0.1) inset,
        .05em .05em .1em rgba(0, 0, 0, .05) inset;
    --shadow-sharp-and-wide: 0 .1em 1em rgba(0, 0, 0, 0.05),
        0 .2em 1.5em rgba(0, 0, 0, 0.075),
        .1em .125em .15em rgba(0,0,0,.02),
        .4em .3em 1em rgba(0,0,0,.075),
        .05em .05em .2em rgba(0, 0, 0, .05);

}

body, html {
    padding: 0;
    margin: 0;
    font-size: 1.1em;
    scroll-behavior: smooth;
    scroll-padding-top: 150px;
}

body {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

html {
    interpolate-size: allow-keywords;
}


h1, h2, h3, h4, h5, h6,
strong, b {
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
}

h1,
h2 {
    display: block;
    font-size: 1.8em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    unicode-bidi: isolate;
}

h1 {
    margin: .25em 0 .25em;
}

.slider {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-dots {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.slide-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
    border: 2px solid transparent;
}

.slide-dot.active {
    background-color: #fff;
    border: 2px solid #eee;
}

.mobile-br {
    display: none;
}

@media (min-width: 1000px) {
    h1,
    .section .text h2 {
        font-size: calc(1.35em + 2.75vw);
    }

    .content-page h1 {
        margin-top: 3em;
    }
}

h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
    unicode-bidi: isolate;
    line-height: 1.05em;
}

@media (min-width: 900px) {
    h2 {
        font-size: 2.5em;
        margin-bottom: .5em;
    }
}

p,
li {
    font-size: 1.1em;
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

input, textrea, select, button {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

body {
    font-family: 'urby-soft-light', sans-serif;
    background-color: var(--white);
    color: var(--light);
    min-width: 320px;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.header {
    background-color: transparent;
    padding: 2em 0;
    height: 0;
    z-index: 15;
    width: 100%;
    position: fixed;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.header.scrolled {
    padding: 1em 0;
}

.header .inner {
    display: flex;
    align-items: center;
}

.header.scrolled.not-really-logged-in {
    background-color: var(--primary);
    transform: translateY(-10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    height: 40px;
    z-index: 102;
}

/* sticky footer */
.page-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1;
}

.footer {
    background-color: var(--dark);
    padding: 5% 0;
    z-index: 5;
    color: var(--light);
    margin-top: 3em;
    position: relative;
    font-size: .8em;
}

@media (min-width: 1200px) {
    footer .mission-claim br {
        display: none;
    }
}

@media (max-width: 359px) {
    footer .mission-claim {
        font-size: .95em;
        letter-spacing: -.02em;
    }
}


footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 2em;
}

footer h4 {
    margin: 0;
    font-size: 1.1em;
    margin-bottom: .25em;
}

footer .part1,
footer .part2 {
    margin-right: 2em;
}

footer .part2 {
    flex: 0 0 25%;
}

footer .part1 {
    flex: 0 0 50%;
}

.footer-nav {
    min-width: 8em;
}

.footer .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.footer-nav a {
    display: block;
    text-decoration: none;
    padding: .25em;
}

footer .last-thing {
    position: absolute;
    right: 0;
    bottom: 2.5em;
    width: 100%;
    text-align: right;
}

footer .last-thing img {
    margin-left: auto;
    width: 2em;
}

@media (max-width: 899px) {
    footer .last-thing {
        bottom: 7%;
    }

    footer .last-thing img {
        margin-left: auto;
        width: 1.75em;
    }

    footer .part1,
    footer .part2 {
        margin-bottom: 3em;
        margin-right: 3em;
    }

    footer .logo {
        width: 10em;
        height: 35px;
        margin-bottom: .75em;
    }

    footer .inner {
        display: flex;
        flex-direction: column;
    }

    footer .part2 {
        order: 3;
        margin-bottom: 0;
    }

    footer .part1 {
        order: 1;
        padding-top: 1em;
        margin-bottom: 4em;
    }

    footer .footer-nav {
        order: 2;
        margin-bottom: 3em;
        margin-left: -.2em;
    }
}


.hr-news {
    border: none;
    height: 1px;
    background-color: var(--dark);
}

.hr-burger {
    border: none;
    height: 1px;
    background-color: var(--light);
}

.teaser {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.teaser .inner {
    padding-top: 12em;
    padding-bottom: 10em;
    position: relative;
    z-index: 8;
}

.startimage {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: var(--primary);
}

.startimage img {
    width: 75%;
    float: right;
    height: 100%;
    object-fit: cover;
}

.teaser-text {
    position: absolute;
    margin-top: 10%;
    color: var(--light);
}

.overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 1) 25%, rgba(var(--primary-rgb), .1) 75%);
    z-index: 4;
}

.tab-container {
    margin-top: -7em;
    position: relative;
    z-index: 3;
    margin-bottom: 3em;
}

.tab-container .chat {
    border-radius: 2em;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.nav-pills {
    position: relative;
    margin-bottom: unset;
    padding: unset;
    box-sizing: border-box;
}

.nav-item {
    width: 33%;
    margin-right: 0.5%;
}

.nav-item:last-child {
    margin-right: 0;
}

.nav-pills li {
    display: inline-block;
}

.nav-pills .nav-link {
    padding: .75em;
    text-align: center;
    background: var(--light);
    color: var(--dark);
    display: block;
    text-decoration: unset;
    user-select: none;
    cursor: default;
    border-radius: 1.5em;
    font-size: 1.2em;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
}

.nav-pills .nav-link.active {
    background: var(--dark);
    color: var(--light);
}

@media (max-width: 749px) {
    .nav-pills .nav-link {
        text-transform: capitalize;
    }

    .news-detail-image {
        height: 15em;
    }
}

.chat {
    padding: 3em 5%;
    position: relative;
    background-color: var(--dark);
    top: 0;
    z-index: 1;
    border-radius: 0.3em;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow-x: hidden !important;
    height: 500px;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.tabs-wrapper {
    position: relative;
}

.chat-shadow {
    position: absolute;
    bottom: -.7em;
    left: 0;
    width: 100%;
    height: .7em;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    z-index: 2;
    border-radius: 0.3em;
}

.chat::after {
    content: "";
    clear: both;
    display: table;
}

.chat a.button {
    font-size: 1em;
    text-transform: none;
    font-family: 'urby-soft-black';
    display: flex;
    align-items: center;
    border-radius: 1em;
    padding: .2em 1.75em;
}

.chat a.button img {
    width: 3.5em;
    height: 3.5em;
    margin-right: .35em;
    margin-left: -.5em;
}

.button {
    padding: 0.5em 1em;
    background-color: var(--primary);
    color: var(--light);
    text-decoration: none;
    font-family: 'urby-soft-black';
    border-radius: 1em;
    text-align: center;
    border: 0;
    font-size: 1em;
    user-select: none;
    cursor: pointer;
}

.button.secondary,
.button.tertiary {
    background-color: var(--dark);
    text-transform: none;
    font-family: 'urby-soft-black';
    border-radius: 1em;
}

.button.tertiary {
    background-color: transparent;
    color: var(--dark);
    box-shadow: var(--shadow);
}

.bubble {
    border-radius: 0.2em;
    background-color: var(--light);
    color: var(--dark);
    padding: 1em;
    width: 60%;
    clear: both;
    margin-bottom: 1em;
    box-sizing: border-box;
    min-height: 5em;
}

.message-sender,
.message-responder {
    flex: 0 0 100%;
    margin-left: 4.5rem;
    margin-bottom: 1.5em;
    margin-top: -.75em;
    font-size: .7em;
}

.message-responder {
    color: var(--light);
    float: right;
    margin-top: 0;
    margin-right: 4.5rem;
}

@media (max-width: 749px) {
    .bubble {
        font-size: .9em;
        margin-bottom: 0;
    }

    .message-sender,
    .message-responder {
        margin: 0;
    }

    .message-wrapper {
        margin-bottom: 1em;
    }
}

.user-bubble {
    border-radius: 0.2em;
    color: var(--dark);
    clear: both;
    margin-bottom: 1em;
    box-sizing: border-box;
    align-self: flex-end;
    width: 80%;
}

.user-bubble label {
    padding: 1em;
    display: inline-block;
    width: 45%;
}

.user-bubble.has-subbubbles input {
    background-image: url('../images/icons-custom/pencil.svg');
    background-repeat: no-repeat;
    background-position: right 0.5em center;
}

.subbubble {
    background-color: var(--light);
    color: var(--dark);
    border-radius: 0.2em;
    padding: 1.25em 1em;
    box-sizing: border-box;
    margin-bottom: .5em;
    margin-right: .5em;
    width: 100%;
}

.next-tab-answer .next-button {
    display: none;
}

.next-tab-answer .inputs-wrapper {

}

.big-link {
    float: right;
    margin-top: -4em;
    position: relative;
    z-index: 5;
    margin-left: auto;
    cursor: pointer;
}

.big-link img {
    width: 8em;
    height: 8em;
}

.news {
    color: var(--dark);
    padding: 3em 0;
}

.news h2 {
    color: var(--primary);
}

@media (max-width: 899px) {
    .section.news .content {
        margin-bottom: 1em;
    }
}

.social-icons {
    display: flex;
    gap: .5em;
    margin-bottom: 1.25em;
}

.social-icons img {
    width: 2em;
    height: 2em;
}

.hidden {
    opacity: 0;
}

p,
li {
    line-height: 1.5em;
}

a {
    color: inherit;
}

header a {
    text-decoration: none;
}

.logo {
    background: url("/images/logo/wowohni_logo_green.svg") no-repeat left;
    background-size: contain;
    color: var(--dark);
    width: 10em;
    height: 40px;
    display: block;
    position: relative;
    top: -.1em;
}

@media (min-width: 750px) {
    .logo {
        width: 12em;
        height: 45px;
    }
}

.logged-in .logo {
    width: 9em;
    height: 45px;
}

/* Burger Menu */
.nav-main-startpage {
    display: block;
    cursor: pointer;
    width: 46px;
}

.nav-main-startpage li {
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
}

label .menu {
    transition: .5s ease-in-out;
    width: 46px;
    height: 46px;
    background: transparent;
}

label .hamburger {
    display: block;
    background-color: var(--dark);
    top: 20px;
    position: relative;
    transform-origin: center;
    transition: .5s ease-in-out;
}

label .hamburger,
label .hamburger:after,
label .hamburger:before {
    width: 46px;
    height: 7px;
    border-radius: .5em;
}

.hamburger.scrolled {
    background-color: var(--light);
    padding: 2%;
    transform: translateY(-10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

label .hamburger:after, label .hamburger:before {
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    content: "";
    position: absolute;
    display: block;
    background-color: var(--dark);
}

label .hamburger:before {
    top: -16px;
}

label .hamburger:after {
    bottom: -16px;
}

.user-actions label input {
    display: none;
}

label input:checked + .menu {
    box-shadow: 0 0 0 100vw var(--dark), 0 0 0 100vh var(--dark);
    border-radius: 0;
    background: var(--dark);
}

label input:checked + .menu .hamburger {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: var(--light);
}

.user-bubble label [type="checkbox"],
.user-bubble label [type="radio"] {
    position: absolute;
    opacity: 0;
}

label input:checked + .menu .hamburger:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    bottom: 0;
    background-color: var(--light);
}

label input:checked + .menu .hamburger:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0;
}

@media (max-width: 749px) {
    .nav-main-startpage {
        width: 35px;
    }

    label .hamburger,
    label .hamburger:after,
    label .hamburger:before {
        width: 35px;
        height: 6px;
    }

    label .hamburger:before {
        top: -12px;
    }

    label .hamburger:after {
        bottom: -12px;
    }

}

.nav-fullpage {
    z-index: 200;
    position: fixed;
    opacity: 0;
    transition: opacity 0s;
    overflow: auto;
    width: 0;
    font-size: calc(1em + 2vw);
    max-height: 100vh;
    left: 0;
    padding: 0;
}

.nav-fullpage .button {
    text-transform: none;
    background-color: var(--primary);
    font-size: .6em;
}

label input:checked + .menu + .nav-fullpage {
    opacity: 1;
    width: 90%;
    transition: opacity 1s ease-in-out;
    padding: 0 5% 5%;

}

label li {
    display: unset;
}

label a {
    display: block;
    color: var(--light);
    text-decoration: none;
}

[v-if],
[v-show] {
    display: none;
}

.error {
    background-color: var(--warn);
    padding: .5em 1em;
    display: block;
    border-radius: .2em;
    margin-bottom: 1em;
}

input {
    border: 0;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
}

.hidden {
    display: none;
}

.email-form input {
    width: 100%;
}

.user-actions {
    z-index: 105;
    margin-left: auto;
    position: relative;
    display: flex;
}

.user-actions button {
    border: 0;
}

body:not(.page-home) .really-logged-in .user-actions {
    position: absolute;
    top: .5em;
    right: 4%;
}

.header .dropdown {
    position: absolute;
    top: 2.75em;
    right: 0;
    border-radius: .3em;
    min-width: 15em;
    background-color: var(--light);
    box-shadow: var(--shadow);
}

.really-logged-in .dropdown {
    min-width: 0;
}

.header .dropdown button {
    color: var(--dark);
}

.toggle-login {
    border: 0;
    padding: .6em 1.5em .7em;
    border-radius: 1.5em;
    user-select: none;
    cursor: pointer;
    margin-right: 1em;
    background-color: var(--dark);
    font-family: "urby-soft-black";
    display: flex;
    align-items: center;
    font-size: .9em;
}

.toggle-login img {
    margin-right: .5em;
    margin-left: -.2em;
    width: 1.5em;
    height: 1.5em;
}

@media (max-width: 749px) {
    .toggle-login {
        padding-left: 1em;
        padding-right: 1em;
        padding-top: .4em;
        padding-bottom: .4em;
        position: relative;
        top: .3em;
        margin-right: .5em;
    }

    .toggle-login .login-text {
        display: none;
    }

    .toggle-login img {
        margin: 0;
        width: 1.2em;
    }
}

.header .dropdown {
    padding: 1em;
}

.header .dropdown .login-form {
    background-color: var(--light);
    border-radius: 0.3em;
    right: 0;
}

.header .dropdown input {
    width: 100%;
    margin-bottom: 1em;
    margin-top: 1em;
    box-shadow: 0 0 .1em rgba(0, 0, 0, 0.5) inset;
    padding: .5em;
    background-color: #fff;
    box-sizing: border-box;
    color: var(--dark);
}

.header .dropdown label {
    color: var(--dark);
}

.header .dropdown .button {
    background-color: var(--primary);
    color: var(--light)
}

.logout-area {
    cursor: pointer;
}

.logout-area img {
    width: 1.5em;
    margin-right: .7em;
    margin-top: -.4em;
}

.close-btn {
    position: absolute;
    top: 5px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--dark);
}

.info-box,
.success-info {
    background-color: green;
    margin-bottom: 1em;
    font-size: 1.2em;
}

.global-info-box {
    background-color: green;
    position: fixed;
    z-index: 6;
    padding: .75em 2em;
    font-size: 1em;
    border-radius: 1em;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: inline-block;
    box-shadow: var(--shadow);
    top: .5em;
}

.global-info-box .closer {
    position: absolute;
    top: -.5em;
    right: -.5em;
    padding: .5em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    background-color: green;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    border: 1px solid var(--light);
}

.global-info-box.warn {
    background-color: var(--warn);
}

.global-info-box.warn .closer {
    background-color: var(--warn);
}

.global-error-messages,
.global-info-box {
    opacity: .9;
    position: fixed;
    z-index: 6;
}

aside {
    background-color: var(--primary);
    padding: 2em;
    padding-top: 4em;
    min-width: 13em;
    margin: 4.5% 0 3em 5%;
    color: #fff;
    border-radius: var(--boxborderradius);
    align-self: stretch;
}


aside a {
    display: block;
    text-decoration: none;
    padding: .5em 0;
    font-size: 1.1em;
    color: var(--light);
    opacity: .75;
    font-family: 'urby-soft-regular';
}

aside a.active {
    opacity: 1;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
}

aside a img {
    width: 1.35em;
    position: relative;
    top: -.1em;
    margin-right: 1em;
}

aside .profile-info {
    text-align: center;
    margin-bottom: 2em;
}

aside .profile-info .circle img {
    width: 3em;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: var(--shadow);
    background-color: var(--light);
    margin-bottom: .25em;
    box-sizing: border-box;
}

aside .profile-info .circle.no-avatar img {
    padding: .25em;
}

aside .profile-info h2 {
    margin: 0;
    margin-bottom: .25em;
    color: var(--light);
}

.badge {
    border-radius: 1em;
    font-size: .7em;
    box-shadow: var(--shadow);
    display: inline-block;
    padding: .5em 1em;
}

.badge.memberstatus.premium {
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
    font-size: .9em;
    color: var(--primary);
    letter-spacing: .015em;
}

.badge.memberstatus.premium span {
    color: var(--light);
}

aside .badge {
    background-color: var(--dark);
    color: #fff;
}

.main-content {
    padding: 3em 5% 3em 2.5%;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1199px) {
    aside {
        display: none;
    }

    .main-content {
        padding-left: 5%;
    }
}


.inner {
    padding: 0 5%;
    max-width: 100rem;
    margin: 0 auto;
    width: 90%;
}

.inner.wide {
    max-width: none;
}

.inside-app {
    color: var(--dark);
}

p {
    max-width: 50em;
}

.inside-app form {
    background-color: var(--light);
    padding: 2em;
}

.inside-app input {
    background-color: #fff;
    border-radius: .3em;
    margin-bottom: 1em;
    padding: .5em;
}

.cards {
    margin-top: 3em;
    display: flex;
    width: 104%;
    margin-left: -2%;
    flex-wrap: wrap;
}

.card {
    background-color: #fff;
    color: var(--dark);
    width: 15em;
    padding: 2em;
    border-radius: .5em;
    margin: 2%;
    text-decoration: none;
    flex: 0 1 30%;
}

/* Responsive design */
@media (max-width: 749px) {
    body {
        font-size: 1em;
    }

    h1 {
        font-size: 1.6em;
        margin-block-start: 0.2em;
    }

    .teaser-text {
        margin-top: 8%;
    }

    p {
        line-height: 1.4em;
    }

    .tab-container {
        width: 90%;
        left: 5%;
    }

    .chat {
        padding: 2em 1em;
    }

    .bubble {
        width: 80%;
    }

    .bubble p {
        margin-block-start: 0.5em;
    }

    .user-bubble label {
        display: block;
        width: 100%;
    }

    .subbubble {
        background-color: var(--light);
        color: var(--dark);
        border-radius: 0.2em;
        box-sizing: border-box;
        padding: 1em;
        width: 100%;
        margin-right: 0;
    }

    .teaser-text p {
        display: none;
    }

    .nav-item {
        font-size: 0.8em;
    }

    #tab-component {
        .inner {
            padding: unset;
            max-width: unset;
            margin: unset;
            width: unset;
        }
    }

    .text-not-mobile {
        display: none;
    }
}

main {
    width: 100%;
}

.content-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
}

.logged-in {
    main {
        display: flex;
        flex-direction: column;
    }
}

.logged-in .page-wrapper {
    background-color: var(--light);
}

.content-wrapper form {
    padding: 2em;
    border-radius: .5em;
}

.content-wrapper form select,
.content-wrapper form input {
    width: 100%;
    margin-bottom: 1em;
    margin-top: .25em;
    box-shadow: 0 0 .1em rgba(0, 0, 0, 0.5) inset;
    padding: .5em;
    background-color: #fff;
    border-radius: .3em;
    box-sizing: border-box;
    color: var(--dark);
}

.content-wrapper form [type="radio"] {
    width: auto;
    box-shadow: none;
    width: 1.15em;
    height: 1.15em;
    margin-bottom: .25em;
}

.radios-wrapper {
    margin-bottom: 1.5em;
}

label {
    font-family: 'urby-soft-bold', sans-serif;
}

.radio label {
    font-family: 'urby-soft-light', sans-serif;
    position: relative;
    top: -.2em;
}

label.subbubble {
    font-family: inherit;
}

.tiles {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 104%;
    margin-left: -2%;
}

.tile {
    margin: 2%;
    text-decoration: none;
    background-color: var(--light);
    flex: 0 0 21%;
    border-radius: var(--boxborderradius);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .5em;
    box-sizing: border-box;
    min-height: 10em;
    position: relative;
    box-shadow: 0 .1em .5em rgba(0, 0, 0, 0.05),
    0 .2em 1.5em rgba(0, 0, 0, 0.2),
    .05em .05em .2em rgba(0, 0, 0, .1);
    transition: transform .15s;
}

.tile:hover {
    transform: scale(1.025);
    z-index: 1;
}

.tile:active {
    transform: scale(0.975);
}


.tile h2 {
    font-size: 1.1em;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
}

.tile .icon {
    width: 3em;
    margin: 0 auto;
}

.tile .button {
    box-shadow: 0 .1em 1em rgba(0, 0, 0, 0.1),
    0 .2em 1.5em rgba(0, 0, 0, 0.05),
    .05em .05em .2em rgba(0, 0, 0, .1);
}

.tile-matches {
    flex: 0 0 46%;
    background-color: #fff;
    color: var(--primary);
}

.tile-plus {
    background-color: var(--dark);
    color: var(--light);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile h2 {
    font-size: 1.65em;
}

.tile-matches .button {
    background-color: var(--light);
    color: var(--primary);
}

.tile-tipp {
    flex: 0 0 98%;
}

.tile-tipp .preheadline {
    display: flex;
}

.tile-tipp .preheadline img {
    margin-right: .5em;
}

.tile-tipp .slide:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(65deg, rgba(var(--primary-rgb), .7) 20%, rgba(var(--primary-rgb), .1));
    z-index: 2;
}

.tile-tipp .slide:nth-child(2n + 1):before {
    background-image: linear-gradient(65deg, rgba(var(--darkrgb), .7) 20%, rgba(var(--darkrgb), .1));
}

.tile-searches {
    background-color: var(--dark);
    color: var(--light);
}

.tile-searches .button {
    background-color: var(--darklighter);
    box-shadow: 0 .1em 1em rgba(0, 0, 0, 0.2), 0 .2em 1.5em rgba(0, 0, 0, 0.1), .05em .05em .2em rgba(0, 0, 0, .3);
}

.tile-offers {
    background-color: var(--primary);
    color: var(--light);
}

.tiles {
    flex-direction: row;
}

.tile {
    flex: 0 0 46%;
}

.tile-matches,
.tile-tipp,
.tile-plus {
    flex: 0 0 96%;
}

.news-content {
    padding: 2em 10em 0 10em;
}

@media (min-width: 1400px) {
    .tile {
        flex: 0 0 23%;
        margin: 1%;
    }

    .tile-matches {
        flex: 0 0 48%;
    }

    .tile-tipp {
        flex: 0 0 73%;
    }
}

.texts-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 102%;
    margin-left: -1%;
}

.texts-wrapper .text {
    margin: 1%;
    flex: 0 0 48%;
}

.simpleauth {
    background-color: var(--primary);
    padding: 1em;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.simpleauth input {
    background-color: #fff;
    border-radius: .2em;
    padding: .5em;
    color: var(--dark);
}

.form-item.checkbox {
    display: flex;
    align-items: center;
    margin-bottom: .5em;
}

.form-item.checkbox input {
    width: 1.25em;
    height: 1.25em;
}

.form-item.checkbox label {
    position: relative;
    top: -.4em;
}

.selectize-input,
.selectize-dropdown,
.selectize-input > input {
    font-size: 1em;
}

.selectize-control.plugin-remove_button [data-value] .remove {
    font-size: 1em;
    padding-left: .35em;
    width: auto;
    padding-right: .35em;
}

.selectize-control.plugin-remove_button [data-value] {
    padding-right: 1.8em !important;
}

.selectize-control.multi .selectize-input.has-items {
    padding: .5em .5em .3em;
    border-radius: .3em;
}

.tile {
    position: relative;
    padding: 3%;
}

.tile.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile.slider {
    padding: 0;
}

@media (min-width: 1200px) {
    .tile.slider {
        margin-bottom: 0;
    }
}

.tile .slide {
    position: relative;
    text-decoration: none;
}

.tile .slide .button {
    margin-bottom: 1.5em;
}

.tile .slide .content {
    padding: 3%;
}

.tile .icon {
    width: 50%;
    max-width: 6em;
    align-self: center;
}

.tile .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.tile .content {
    position: relative;
    z-index: 2;
}

.tile .background img {
    border-radius: var(--boxborderradius);
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

.tile.tile-tipp {
    text-align: left;
    color: var(--light);
}

.tile.tile-tipp .background:before {
    border-radius: var(--boxborderradius);
    content: '';
    display: block;
    opacity: .25;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--dark);
}

.tile.tile-tipp h2 {
    font-size: 1.5em;
    margin-bottom: .25em;
}

.tile .preheadline {
    text-transform: uppercase;
    font-size: .85em;
    margin: 1em 0 3em;
    font-family: 'urby-soft-bold', sans-serif;
}

.tile .preheadline img {
    width: 1.25em;
    position: relative;
    top: -.075em;
}

.tile .button {
    border-radius: var(--boxborderradius-small);
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
    text-transform: none;
    font-size: .8em;
    display: inline-block;
    width: auto;
    margin-top: .5em;
    align-self: center;
}

.tile.tile-tipp .button {
    background-color: var(--light);
    color: var(--dark);
    float: right;
}

.section {
    padding: 4.5em 0;
    color: var(--dark);
}

.section .image img {
    height: 50vw;
    object-fit: cover;
    width: 100%;
}

.section.header-image {
    padding-top: 0;
}

.section.header-image img,
.section.header-image video {
    width: 100%;
}

.section.text {
    padding: 2em 0 7em;
}

.section.text .image.changer {
    background-color: var(--light);
    text-align: center;
    border-radius: 1em;
    padding-top: 4em;
    padding-bottom: 4em;
    box-shadow: var(--shadow-wide);
}

.section.text .image.changer img {
    height: 50%;
    width: 50%;
    object-fit: contain;
}

@media (max-width: 1000px) {
    .news-content {
        padding: 2em 0 0 0;
    }

    .content-page h1 {
        margin-top: 5em;
    }
}

@media (min-width: 1000px) {
    .section.text .inner {
        display: flex;
        align-items: center;
    }

    .section .image {
        margin-right: 5%;
        flex: 0 0 50%;
    }

    .section .image img {
        /*  min-height: 25em; */
        height: auto;
    }
}

.dashboard {
    color: var(--dark);
}

.really-logged-in {
    position: absolute;
}

.main-content {
    color: var(--dark);
}

.really-logged-in .logo {
    display: none;
}

.really-logged-in .user-actions .logout-area > button {
    font-size: 1.5em;
}

.really-logged-in.header {
    top: 1%;
    right: 1%;
}

@media (min-width: 1200px) {
    .really-logged-in.header {
        top: calc(1.5% + 3em);
        right: 1%;
    }
}

.content-page h1 {
    margin-bottom: 0;
    color: var(--dark);
}

.accordion-item {
    padding: 2em 0;
    border-top: 1px solid var(--dark);
}

.accordion-item .accordion-content {
    overflow: hidden;
    transition: height 0.2s;
}

.accordion-item h2 {
    font-size: 1.2em;
    margin-bottom: .5em;
    font-family: 'urby-soft-bold', sans-serif;
}

/*.accordion-item[data-state="closed"] .accordion-content {
    height: 0;
}*/

.accordion-item[data-state="open"] .accordion-content {
    height: auto;
}

.nav-sidebar {
    border: 0;
}

.formblock {
    background-color: var(--dark);
}

.formblock label {
    color: var(--light);
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
}

.formblock input {
    margin-top: 0;
}

.image-preview-canvas {
    height: 0;
}

.filepond--credits {
    display: none;
}

.filepond--list {
    display: flex;
    flex-wrap: wrap;
    gap: 1%; /* Abstand zwischen den Vorschaubildern */
}

.filepond--item {
    flex: 0 0 auto;
    width: 31.33%;
}

.property-images {
    display: flex;
    flex-wrap: wrap;
    width: 102%;
    margin-left: -1%;
}

.property-images .image {
    width: 13em;
    height: 8em;
    margin: 1%;
    border-radius: 1em;
    overflow: hidden;
    position: relative;
}
.property-images .image .delete-button {
    font-size:.7em;
    padding:.4em .5em;
    position: absolute;
    top:.5em;
    right:.5em;
    z-index: 3;
}

.property-images .image:hover img {
    transform: scale(1.05);

}

.property-images .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.filepond--drop-label {
    background-color: transparent;
    color: var(--light);
}

.filepond--root {
    font-family: inherit;
    background-color: var(--darkverylight);
    border-radius: 1em;

}

.filepond--panel-root {
    background-color: transparent !important;
}

.visual-block {
    background-color: rgba(255, 255, 255, .5);
    border: 1px solid #fff;
    box-shadow: var(--shadow-wide);
}

.avatar-indicator,
.next-button {
    width: 3em;
    background-color: var(--light);
    padding: .5em;
    border-radius: 50%;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1em;
    margin-top: -.5em;
    box-sizing: border-box;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
    color: var(--primary);
    flex: 0 0 3em;
}

@media (min-width: 750px) {
    .message-wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
    }
}

@media (max-width: 749px) {
    .avatar-indicator {
        margin-bottom: -1em;
        box-shadow: var(--shadow);
        position: relative;
    }
}


@media (min-width: 750px) {
    .inputs-wrapper {
        display: flex;
        align-items: center;
    }

    .inputs-wrapper-inner {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex: 0 01 calc(100% - 3.5em);
        justify-content: flex-end;
    }

    .inputs-wrapper-inner .subbubble {
        flex: 0 1 45%;
    }
}

@media (max-width: 749px) {
    .next-button {
        float: right;
        margin-top: -1em;
        box-shadow: var(--shadow);
        position: relative;
    }
}

.next-button {
    margin-left: .4em;
    margin-right: 0;
    flex: 0 0 3em;
    height: 3em;
}

.next-button img {
    position: relative;
    left: .15em;
    width: 1.85em;
    height: 1.85em;
}

.inputs-wrapper .filepond--root {
    width: 100%;
    margin-right: .5em;
}

.typing-indicator {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-shadow: var(--shadow-wide);
    padding: 1em;
    border: 1px solid rgba(var(--lightrgb), .2);
    border-radius: 1em;
}

@media (max-width: 749px) {
    .typing-indicator {
        margin-top: 1.5em;
    }
}

.dot {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: var(--light);
    border-radius: 50%;
    animation: blink 1.5s infinite;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.3;
    }
}

[type="checkbox"] {
    width: 1.5em;
    height: 1.5em;
}

.no-button {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
}

.message-wrapper .magnifier img {
    width: 9em;
    height: 9em;
    position: absolute;
    right: 0;
    cursor: pointer;
    top: 0;
}

.page-home .page-wrapper,
.page-informal .page-wrapper {
    background-color: #fff;
}

.page-home .page-wrapper .really-logged-in.header,
.page-informal .page-wrapper .really-logged-in.header {
    top: 1em;
    right: 0;
}

.page-home .page-wrapper .really-logged-in .logo,
.page-informal .page-wrapper .really-logged-in .logo {
    display: block;
}

@media (max-width: 464px) {
    .page-home .start-teaser br {
        display: none;
    }
}

@media (max-width: 430px) {
    .mobile-br {
        display: inline;
    }
}

.page-informal p {
    max-width: none;
}

label:has(input[type="radio"]:checked),
label:has(input[type="checkbox"]:checked) {
    font-weight: bold;
    color: var(--light);
    text-shadow: 0 0 2em rgba(0, 0, 0, .8);
    background: var(--darkverylight);
    border: 1px solid var(--light);
}

.nav-main-startpage:has(input[type="radio"]:checked),
.nav-main-startpage:has(input[type="checkbox"]:checked) {
    text-shadow: none;
}


label:has(input[type="radio"]:focus),
label:has(input[type="checkbox"]:focus) {
    outline: 3px solid #fff;
    box-shadow: 0 0 .1em rgba(0, 0, 0, 1);
}

/* Animation für show-wronganswer */
.show-wronganswer-enter-active, .show-wronganswer-leave-active {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.show-wronganswer-enter-from, .show-wronganswer-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.show-wronganswer-enter-to, .show-wronganswer-leave-from {
    opacity: 1;
    transform: translateY(0);
}

/* Animation für show-question mit Verzögerung */
.show-question-enter-active, .show-question-leave-active {
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; /* 0.2s Verzögerung */
}

.show-question-enter-from, .show-question-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.show-question-enter-to, .show-question-leave-from {
    opacity: 1;
    transform: translateY(0);
}

/* Animation für show-answer mit zusätzlicher Verzögerung */
.show-answer-enter-active, .show-answer-leave-active {
    transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s; /* 0.4s Verzögerung */
}

.show-answer-enter-from, .show-answer-leave-to {
    opacity: 0;
    transform: translateY(20px);
}

.show-answer-enter-to, .show-answer-leave-from {
    opacity: 1;
    transform: translateY(0);
}

.wrong-answer .inputs-wrapper input {
    border: 3px solid var(--warn);
}

.chat-field-like-button {
    background-color: var(--darkverylight);
    align-self: stretch;
    margin-right: 1em;
    margin-bottom: .5em;
    border-radius: .5em;
    padding: .2em 2em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}


.match-part {
    margin: 1em 0;
    padding: 1em 0;
}


.match-part:not(:last-child) {
    border-bottom: 1px solid var(--dark);
}

.match-part .card {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1em;
    box-shadow: var(--shadow-wide);
    border-radius: 1.5em;
    padding: 0;
    overflow: hidden;
}
@media(min-width: 800px) {
    .match-part .card {
        display: flex;
    }
}

.match-part h2 {
    font-size: 1.6em;
}

.match-part h2 img {
    position: relative;
    top: -.1em;
    width: 1.2em;
    margin-right: .1em;
}
.submeta {
    margin-bottom:2em;
}

@media (min-width:1600px) {
    .submeta {
        display: flex;
        justify-content: space-between;
        margin-bottom:2em;
    }
}

.match-part .image {
    background-color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6% 9%;
    flex:0 0 30%;
    border-radius: .75em;
    margin:.75em;
    box-sizing: border-box;
}

.match-part .image img {
    aspect-ratio: 16/9;
}

.match-part .photo {
    padding:0;
}
.match-part .photo img {
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius:.85rem;
}

.match-part .text {
    display: flex;
    align-items: flex-start;
    padding: 5%;
    align-self: center;
}
.match-part .text.has-data {
    display: block;
    width:100%;
    padding:2.5%;
}

.match-part .text img {
    margin-right: .25em;
    width: 1.5em;
    height: 1.5em;
}
.match-part .text.has-data img {
    margin-right:0;
    position: relative;
    top:-.15em;
}

.match-part .contact-area {
    background-color: var(--primary);
    color:var(--light);
    padding:2.5%;
}
.match-part .contact-area p {
    font-size: .8em;
    margin-bottom:2em;
}
.match-part .contact-area .button {
    box-shadow: var(--shadow-sharp-and-wide);
}
.match-popup {
    max-width: 90%;
    width:55em;
    border-radius:1.5rem;
    padding:0;
    display: none;
}
@media(min-width:900px) {
    .match-popup-inner {
        display: flex;
        flex-direction: row;
    }
}
.match-popup .image {
    flex: 0 0 45%;
    padding:2.5%;
    border-radius:1.5rem;
    border-bottom-right-radius:0;
    border-top-right-radius:0;
}
.match-popup .image img {
    height:100%;
    width:100%;
    object-fit: cover;
    border-radius:1rem;
}
.match-popup .text {
    padding:2% 5%;
    background-color: var(--primary);
    color:var(--light);
    border-radius:1.5rem;
    border-bottom-left-radius:0;
    border-top-left-radius:0;
}
@media(max-width:899px) {
    .match-popup .text {
        border-radius:1.5rem;
        border-top-right-radius:0;
        border-top-left-radius:0;
    }
}
.match-popup h2 {
    font-size:2em;
}
.match-popup p {
    font-size:.8em;
    max-width:25em;
}
.match-popup .button {
    box-shadow: var(--shadow-sharp-and-wide);
    margin:3em 0 1em;
    padding:1em 2em;
    display: inline-block;
    border-radius:2em;
}
.fancybox__backdrop {
    background:rgba(var(--darkrgb),.9);
}

.page-intro-text {
    margin-bottom: 3em;
    max-width:40rem;
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    animation: shine 2s infinite linear;
}

.shine.on-negative-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, .75),
        transparent
    );
    animation: shine 2s infinite linear;
}

.shine.on-light-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--lightrgb), .5),
        transparent
    );
    animation: shine 2s infinite linear;
}
.match-part .button {
    margin-top:1em;
    margin-bottom:1em;
    display: block;
}
.fat-button {
    padding:1em 1.5em;
    font-size: 1.1em;
    border-radius:2rem;
}

@keyframes shine {
    to {
        left: 100%;
    }
}

.chances {
    background-image: url('/images/teasers/pexels-thirdman-8470839 1.avif');
    background-size: cover;
    background-position: center;
    min-height: 5em;
    color: var(--light);
    text-align: center;
}

.chances:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(230deg, rgba(var(--darkrgb), .7) 20%, rgba(var(--darkrgb), .1));
}

.chances .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 2em;
    padding-bottom: 2em;
}

.search-chance-wrap {
    padding: 6em 0;
    display: flex;
    text-align: center;
}

.search-chance-wrap .image {
    margin-right: 0;
}

.search-chance-wrap .image img {
    width: calc(6vw + 3em);
    height: calc(6vw + 3em);
    margin: 0 auto;
}

.search-chance-wrap .image.invisible img {
    width: 2em;
}

.search-chance-wrap h3,
.search-chance-wrap .fake-h3 {
    margin: 0;
    font-size: calc(2vw + 2em);

    @media (max-width: 899px) {
        font-size: 1.1em;
    }
}

.search-chance-wrap .search-part,
.search-chance-wrap .chance-part {
    flex: 0 0 40%;
}

.search-chance-wrap .mean-part {
    flex: 0 0 20%;
}

.chances .button {
    align-self: center;
}

.chances .text {
    max-width: 20em;
    margin: 0 auto;

    @media (max-width: 899px) {
        font-size: .75em;

        p {
            line-height: 1.2em;
        }
    }
}

.cta-button {
    border-radius: 1.5em;
    font-family: 'urby-soft-black';
    text-transform: none;
    padding: 1em 2em;
}

.invisible {
    opacity: 0;
}

.news-item {
    border-top: 1px solid var(--dark);
    padding: 1.5em 0;
}

.news-item:last-child {
    border-bottom: 1px solid var(--dark);
}

@media (min-width: 900px) {
    .news-item {
        display: flex;
        justify-content: space-between;
    }

    .more-button {
        align-self: flex-end;
    }
}

.motivation-teaser {
    padding: 2em;
    border-radius: 1.5em;
    overflow: hidden;
    margin-bottom: 2em;
}

.motivation-teaser .button {
    display: inline-block;
    padding: .5em 2em;
}

.motivation-teaser1 {
    background-image: url('/images/teasers/pexels-artempodrez-5025512 1.avif');
    background-size: cover;
    background-position: center;
    min-height: 5em;
    color: var(--light);
    text-align: center;
    position: relative;
    padding-top: 3em;
    padding-bottom: 3em;
    box-shadow: var(--shadow-wide);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.motivation-teaser1 .text,
.motivation-teaser1 .image {
    position: relative;
    z-index: 5;
}

.motivation-teaser1 p {
    margin: 0 auto;
}

.motivation-teaser1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(60deg, rgba(var(--primary-rgb), .7) 20%, rgba(var(--primary-rgb), .1));
}

@media (min-width: 900px) {
    .motivation-teasers .inner {
        display: flex;
    }

    .motivation-teaser1 {
        flex: 0 0 65%;
        margin-right: 5%;
    }
}

.motivation-teaser2 {
    text-align: center;
    background-color: var(--light);
}

.motivation-teaser2 h3 {
    font-size: 2em;
    margin: 0 0 .5em;
}

.section .motivation-teaser2 .image img {
    width: 5em;
    height: auto;
}

.more-button {
    display: inline-block;
}

.wowohni-plus {
    color: var(--dark);
}

.wowohni-plus-teaser {
    box-shadow: var(--shadow-wide);
    border-radius: 1.5rem;
}

.wowohni-plus-teaser .teaser-head {
    background-color: var(--dark);
    text-align: center;
    padding: 2em 3em;
    border-radius: 1.5rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5rem;
}

.wowohni-plus-teaser .teaser-head img {
    margin-right: .7em;
    width: 12em;
}

.wowohni-plus-teaser .teaser-body {
    padding: 2em;
    background-color: #fff;
    border-radius: 1.5rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.wowohni-plus-teaser ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.wowohni-plus-teaser li {
    margin-bottom: .7em;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
}

.bigplus {
    color: var(--light);
    font-size: 3em;
    display: inline-block;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
    position: relative;
    top: .05em;
}

.wowohni-plus-teaser .teaser-head {
    position: relative;
}

.wowohni-plus-teaser .badge {
    position: absolute;
    border-radius: 50%;
    background-color: var(--light);
    width: 10em;
    height: 10em;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 1em .5em .5em;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
    bottom: -4em;
    right: 5%;
}

@media (max-width: 799px) {
    .wowohni-plus-teaser .badge {
        font-size: .6em;
        right: -2%;
    }

    .wowohni-plus-teaser .teaser-head {
        padding-top: 3em;
        padding-bottom: 4em;
    }
}

.wowohni-plus-teaser .badge p {
    margin: 0;
    line-height: 1.2em;
}

.wowohni-plus-teaser .badge strong {
    color: var(--primary);
}

.wowohni-plus-teaser .badge small {
    font-family: 'urby-soft-regular', sans-serif;
    font-size: .6em;

}

.wowohni-plus-teaser .benefits {
    padding: 2em 0;
}

@media (min-width: 800px) {
    .agb-and-pay {
        display: flex;
    }

    .agb-and-pay .agb {
        flex: 0 0 65%;
        margin-right: 5%;
    }

    .agb-and-pay .pay {
        flex: 0 0 30%;
    }
}

.news-page .news-list .news-item {
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 1.5em;
    overflow: hidden;
    margin-bottom: 2em;
    background-color: var(--light);
    color: var(--dark);
    display: flex;
}

.news-page .news-list .news-item .text-content {
    margin-bottom: 2em;
}

.news-page .news-list .news-item:nth-child(2n + 1) {
    background-color: var(--primary);
    flex-direction: row-reverse;
    color: var(--light);
}

.news-page .news-list .news-item:nth-child(3n) {
    background-color: var(--dark);
}

.news-page .news-list .news-item:nth-child(3n) .button {
    background-color: var(--light);
    color: var(--dark);
}

a {
    text-underline-offset: .3em;
}

@media (min-width: 800px) {
    .news-page .news-list .news-item {
        flex-direction: row;
    }
}

@media (max-width: 799px) {
    .news-page .news-list .news-item,
    .news-page .news-list .news-item:nth-child(2n + 1) {
        flex-direction: column-reverse;
    }
}

.news-page .news-list .news-item .text {
    padding: 5%;
    flex: 0 0 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.news-page .news-list .news-item h2 {
    font-size: 1.2em;
    margin-bottom: .25em;
}

.news-page .news-list .news-item .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16/9;
}

.news-page .intro {
    max-width: 40em;
    margin: 9em 0 2em;
}

.news-page .intro p {
    color: var(--dark);
}

.news-page .news-item .last-line {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    align-items: center;
}


.news-page .news-item .button {
    background-color: var(--dark);
}

.wowohni-logo-small img {
    width: 1.2em;
    margin-right: .5em;
}

.logout-and-logo-area {
    margin-top: 1em;
    display: flex;
    align-items: center;
}

.full-width-image img {
    border-radius: 1.5em;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    text-align: center;
    margin-top: 7em;
    margin-bottom: -5em;
}

.mission-grid .box {
    min-height: 5em;
    min-width: 5em;
    background-color: var(--primary);
    gap: 1%;
    padding: 12.5% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1.5em;
    box-shadow: var(--shadow-wide);
    overflow: hidden;
    position: relative;
}

.mission-grid .box strong {
    display: block;
}

.mission-grid .headline {
    font-size: 1.75em;
}

.mission-grid .div1, .mission-grid .div2 {
    color: var(--light);
}

.mission-grid .div3, .mission-grid .div5 {
    background-color: var(--light);
}

.mission-grid .div4 {
    background-color: var(--dark);
    color: var(--light);
}

.mission-grid .div4 .headline {
    color: var(--primary);
    margin-bottom: 1.5em;
}

.mission-grid .div4 p {
    font-size: 0.9em;
}

.mission-grid .div4 p strong {
    font-size: 1.15em;
}

.mission-grid .div6 {
    padding: 0;
}

.mission-grid .div6 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.mission-grid .div1 {
    grid-area: 1 / 1 / 2 / 2;
}

.mission-grid .div2 {
    grid-area: 1 / 2 / 2 / 3;
}

.mission-grid .div3 {
    grid-area: 2 / 1 / 3 / 3;
}

.mission-grid .div4 {
    grid-area: 1 / 3 / 3 / 5;
}

.mission-grid .div5 {
    grid-area: 1 / 5 / 2 / 6;
}

.mission-grid .div6 {
    grid-area: 2 / 5 / 3 / 6;
}

.mission-grid .background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.mission-grid .background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    background-image: linear-gradient(65deg, rgba(var(--primary-rgb), .7) 20%, rgba(var(--primary-rgb), .1));
}

.mission-grid .background img {
    position: absolute;
    object-fit: cover;
    object-position: center;
    width: 100%;
    left: 0;
    height: 100%;
}

.mission-grid .box-inner {
    position: relative;
    z-index: 5;
}

@media (max-width: 799px) {
    .mission-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 0.75em;
        grid-row-gap: 0.75em;
    }

    .mission-grid .div1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    .mission-grid .div2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    .mission-grid .div3 {
        grid-area: 2 / 1 / 3 / 3;
    }

    .mission-grid .div4 {
        grid-area: 3 / 1 / 5 / 3;
    }

    .mission-grid .div5 {
        grid-area: 5 / 1 / 6 / 2;
    }

    .mission-grid .div6 {
        grid-area: 5 / 2 / 6 / 3;
    }

    .mission-grid .headline {
        font-size: 1.25em;
    }
}

.wide-text-distribution h1 {
    margin-top: 0;
}

@media (min-width: 800px) {
    .wide-text-distribution h1 {
        margin-right: 0.5em;
        padding: 0;
        hyphens: auto;
    }

    .wide-text-distribution {
        display: flex;
    }

    .section.text .wide-text-distribution {
        align-items: flex-start;
    }

    .wide-text-distribution .text-wrapper {
        flex: 0 0 55%;
    }
}

@media (max-width: 799px) {
    .wide-text-distribution h1 {
        margin-bottom: 1em;
    }
}

@media (min-width: 1200px) {
    .mobile-only {
        display: none !important;
    }

    .tile-plus,
    .tile-advice {
        margin-bottom: 0;
    }
}

@media (max-width: 1199px) {
    .desktop-only {
        display: none !important;
    }
}

.button-tile {
    min-height: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-family: 'urby-soft-black', sans-serif;
    font-weight: normal;
    font-size: 1.2em;
    padding: .75em 1.5em;
    border-radius: 1.5em;
}

.button-tile img {
    width: 1.5em;
    margin: 0 .5em 0 0;

}

.tile-advice {
    background-color: var(--primary);
    color: var(--light);
}

@media (max-width: 799px) {
    .tile-advice,
    .tile-profile {
        flex: 0 0 96%;
    }
}

.advice-grid {
    display: flex;
    flex-wrap: wrap;
    width: 103%;
    margin-left: -1.5%;
    margin-bottom: -1.5%;
}

.advice-block {
    border-radius: 1.5em;
    margin: 1.5%;
    padding: 3%;
    box-sizing: border-box;
    flex: 0 0 46%;
    color: var(--light);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background-size: cover;
    min-height: 12em;
}

.advice-full {
    flex: 0 0 96%;
    min-height: 35em;
}

.advice-block .advice-box {
    margin-top: 30px;
    margin-bottom: 50px;
    background-color: var(--light);
    min-height: 10em;
    z-index: 1;
    border-radius: 1.5em;
    padding: 2em;
    box-sizing: border-box;
    display: flex;
}

.advice-block .advice-box .advice-text {
    color: var(--dark);
    padding-left: 10%;
}

.advice-block .advice-box .button {
    margin-top: 2em;
    background-color: var(--primary);
    color: var(--light);
    float: right;

}

@media (min-width: 1400px) {
    .advice-block {
        min-height: 18em;
    }
}

@media (max-width: 699px) {
    .advice-grid {
        display: block;
    }

    .advice-block {
        padding: 1.5em;
        margin-bottom: 1em;
    }

    .advice-block .advice-box {
        display: block;
    }
}

.advice-block:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(65deg, rgba(var(--primary-rgb), .7) 20%, rgba(var(--primary-rgb), .1));
}

.advice-block:nth-child(1):before,
.advice-block:nth-child(4):before {
    background-image: linear-gradient(65deg, rgba(var(--darkrgb), .7) 20%, rgba(var(--darkrgb), .1));
}

.advice-block .bottom-line {
    margin-top: auto;
    text-align: right;
}

.advice-block .text-content,
.advice-block .bottom-line {
    z-index: 2;
}

.advice-block h2 {
    hyphens: auto;
    margin: 0 0 .1em;
    font-size: 1.4em;
    line-height: 1em;
}

.advice-block p {
    margin: 0;
    font-size: 1em;
}

.advice-block .button {
    background-color: var(--light);
    color: var(--dark);
    padding: .5em 2em;
}

@media (min-width: 1400px) {
    .advice-block h2 {
        font-size: 2em;
    }
}

.advice-block .text-content {
    margin-bottom: 2em;
}

.news-detail-image {
    object-fit: cover;
    border-radius: 1em;
}

.chips {
    display: flex;
    flex-wrap: wrap;
}
@media(max-width: 799px) {
    .chips {
        font-size:.8em;
    }
}

.chip {
    padding: .5em 1em;
    background-color: var(--dark);
    color:var(--light);
    border-radius: 1em;
    margin: 0 .5em .5em 0;
}

.match-detail-data .image-and-rest {
    display: flex;
}

.match-detail-data {
    border-radius:1.5rem;
    background-color:var(--white);
    border-top-left-radius:0;
    box-shadow:var(--shadow-wide);
}
.pre-match-detail {
    display:inline-block;
    background-color:var(--white);
    padding:.5em 3% 0;
    border-radius:1.5rem;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.pre-match-detail h2 {
    font-size:1.6rem;
}
.match-detail-data .submeta {
    padding:2em 3%;
    margin:0;
}
.match-detail-data .data-and-conversation {
    padding:0 3%;
    flex: 0 0 55%;
}
.data-and-conversation .chips {
    margin-bottom:2em;
}
.match-detail-data .image {
    padding: 0 2% 2%;
}
.match-detail-data .image img {
    border-radius: 1rem;
}
.match-detail-data .submeta {
    display:flex;
    justify-content: flex-start;
}
.match-detail-data .movedate {
    margin-right:2em;
}
.match-detail-data .conversation {
    padding:1em;
    background-color:var(--light);
    border-radius:1.5rem;
    margin-bottom:1.5em;
}
.conversation textarea {
    border-radius:1.5rem;
    border:0;
    box-shadow:var(--shadow-textarea);
    min-height:6em;
    width:90%;
    font-family: inherit;
    font-size:1em;
    padding:1em;
    display:flex;
}
.conversation form {
    padding:0;
}
.conversation .button {
    background-color: var(--dark);
    margin-left:auto;
}