.carousell {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 65%;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
    
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    anchor-name: --btn;
    /*funktioniert auch mit dem gelben kringel Position von den Kreisen*/
    scroll-marker-group: after;
}
.carousell::scroll-button(*) {
    position: absolute;
    position-anchor: --btn;
    top: anchor(bottom);    
    background-color: #DDC7B0;
    margin-top: 5px;
    padding: 0.2rem 1rem 0.2rem 1rem;
    border: none;
    border-radius: 0.3rem;
    font-family: "Glacial", monospace;    
}

.carousell::scroll-button(right) {
    content: '\21E2';
    right: anchor(right);    
}
.carousell::scroll-button(left) {
    content: '\21E0';      
    left: anchor(left);    
}

.carousell > li {
    scroll-snap-align: center;        
    width: 100%;    
}
.carousell p {
    line-height: 1.2;
}
/* Hier werden die Kreise nebeneinander gestellt und in form gebracht */
.carousell::scroll-marker-group {
    display: grid;
    grid-auto-flow: column;     
    justify-content: safe center; 
    gap: 0.5rem; 
    margin: auto;    
    margin-top: 0.5rem;   
}
.carousell > li::scroll-marker {
    content: ' ';
    width: 10px;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    border: 1px solid black;    
}
.carousell img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Farben vom aktiven Kreis. Anzahl Kreise wir automatisch auf die Menge der Li erzeuft. */
.carousell >li::scroll-marker:target-current {
    background: #DDC7B0;
}

@media screen and (max-width: 574px) {
    .carousell::scroll-button(*) {
        margin-top: 0px;
    }
}