body{

    background-image: url("assets/logo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; /* bleibt beim Scrollen stehen */
    overflow-x: hidden; /* verhindert horizontales Scrollen */
    font-family: Georgia, serif;
}

.owncarus {
    font-family: Georgia, serif;
    width: 80%;
    margin-bottom: 100px;
    display: flex;
    overflow-x: auto;
    gap: 1em;
    padding-left: 1em;
    mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);

    /* Hide scrollbar but keep functionality */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}
.owncarus::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Opera */
}

/* Optional: Add cursor feedback */
.owncarus.dragging {
    cursor: grabbing;
}

#owncc, .owncarus {
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* standard */
    -webkit-touch-callout: none; /* iOS: disables callout on long press */
}

.georg{
    font-family: Georgia, serif;
}

/* full width by default */
.storywith { width: 100%; }

/* change to 75% at md breakpoint (>=768px) */
@media (min-width: 768px) {
    .storywith { width: 75%; }
}