.stv-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
}

.stv-access-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.stv-access-card-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 12px;
}

.stv-access-card-title {
    font-weight: 700;
}

.stv-access-card-subtitle {
    margin-top: 4px;
    font-size: .92em;
}

.stv-access-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px;
    overflow: hidden;
}

.stv-access-topbar-greeting {
    flex: 0 0 auto;
    font-weight: 600;
}

.stv-access-topbar-links {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stv-access-topbar-links::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.stv-access-topbar-links a {
    flex: 0 0 auto;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .stv-access-topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .stv-access-topbar-links {
        width: 100%;
    }
}

/* Benutzer-Topbar */
#stv-user-topbar {
    width: 100%;
    background: #f5f7f6;
    border-bottom: 1px solid rgba(126, 163, 143, .35);
    overflow-x: hidden;
}

#stv-user-topbar .stv-access-topbar {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 8px 0px 8px 0px;
    box-sizing: border-box;
    font-family: 'Fira Sans', sans-serif;
}

#stv-user-topbar .stv-access-topbar-greeting {
    color: #585c7f;
    font-size: .9em;
    font-weight: 400;
    white-space: nowrap;
}

#stv-user-topbar .stv-access-topbar-links {
    padding: 1px 0;
}

#stv-user-topbar .stv-access-topbar-links a {
    background: #fff;
    color: #585c7f;
    border: none;
    font-size: .9em;
    font-weight: 400;
    letter-spacing: .2px;
    line-height: 1.2;
    transition: all .2s ease;
     box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
  margin: 3px 0;
}

#stv-user-topbar .stv-access-topbar-links a:hover {
    background: #ed6d96;
    color: #fff;
}

body.darkmode #stv-user-topbar {
    background: #444;
    border-bottom-color: rgba(255, 255, 255, .18);
}

body.darkmode #stv-user-topbar .stv-access-topbar-greeting {
    color: #fff;
}

@media screen and (max-width: 700px) {
    #stv-user-topbar .stv-access-topbar-greeting {margin: 0 auto;}
    #stv-user-topbar .stv-access-topbar {
        padding: 7px 12px 8px;
    }

    #stv-user-topbar .stv-access-topbar-links {
        padding-bottom: 3px;
    }
}

/* Topbar: Scroll-Hinweis und Button-Farben */
#stv-user-topbar .stv-access-topbar {
    position: relative;
}



#stv-user-topbar .stv-access-topbar.is-scrollable.is-scroll-start:not(.is-scroll-end) .stv-access-topbar-links {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 90%, transparent 100%);
}

#stv-user-topbar .stv-access-topbar.is-scrollable:not(.is-scroll-start):not(.is-scroll-end) .stv-access-topbar-links {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 90%, transparent 100%);
}

#stv-user-topbar .stv-access-topbar.is-scrollable:not(.is-scroll-start).is-scroll-end .stv-access-topbar-links {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 5%, #000 100%);
}

#stv-user-topbar .stv-access-topbar-links {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#stv-user-topbar .stv-access-topbar:not(.is-scrollable) .stv-access-topbar-links {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Topbar: kleine Embleme in den Zugangsbuttons */
#stv-user-topbar .stv-access-topbar-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#stv-user-topbar .stv-access-topbar-emblem {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Topbar: Layout ohne Logout-Button */
#stv-user-topbar {
    overflow-x: clip;
    overflow-y: visible;
}

#stv-user-topbar .stv-access-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "greeting links";
    align-items: center;
    column-gap: 14px;
    overflow: visible;
}

#stv-user-topbar .stv-access-topbar-greeting {
    grid-area: greeting;
}

#stv-user-topbar .stv-access-topbar-links {
    grid-area: links;
    width: 100%;
    min-width: 0;
}

@media screen and (max-width: 700px) {
    #stv-user-topbar .stv-access-topbar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "greeting"
            "links";
        row-gap: 4px;
        column-gap: 0;
        padding: 5px 12px 7px;
        align-items: center;
    }

    #stv-user-topbar .stv-access-topbar-greeting {
        justify-self: center;
        margin: 0;
        padding: 0;
        line-height: 32px;
    }

    #stv-user-topbar .stv-access-topbar-links {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 0 0 3px;
    }
}