.slidecontainer p {
    margin-top: 0; /* Entfernt den oberen Standardabstand */
    margin-bottom: 0; /* Entfernt den unteren Standardabstand */
    /* Optional: Du kannst auch eine kleinere line-height setzen, falls der Text selbst zu viel Platz einnimmt */
    /* line-height: 1.2; */
}﻿
.slidecontainer {
    width: 50%;
    /* Flexbox */
    display: flex; /* Makes the container a flex container */
    align-items: center; /* Vertically aligns items in the center */
    gap: 10px; /* Adds some space between the text and the slider */
    margin-bottom: 5px; /* Dies steuert den vertikalen Abstand
}


.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    /*background: #d3d3d3;*/
    background: grey;
    outline: dotted  /*none*/;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 10px;
    /*background: #04AA6D;   hellgrün*/
    background: white ;
    cursor: pointer;
}


a {
    color: #5D5D9E;
}

    a:visited {
        color: #5D5D9E;
    }

    a:active {
        color: #5C615E;
    }

    a:hover {
        color: #B2B3B4;
    }

#container {
    vertical-align: top;
    position: relative;
    display: inline-block;
    width: 478px; /* Feste Breite in Pixeln */
    height: 450px; /* Feste Höhe in Pixeln */
    background: none;   
}

#spielfeld {
    width: 100%; /* Breite des Containers */
    height: 100%; /* Höhe des Containers */
}

.button {
    background-color: transparent;
    border: none;
    width: 40px; /* Feste Breite in Pixeln */
    height: 40px; /* Feste Höhe in Pixeln */
    background-size: cover;
    cursor: pointer;
    position: absolute; /* Stelle sicher, dass die Positionierung absolut ist */
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    color: white;
    /*background-color: #f0f0f0;     weiss*/
    background-color: black;
}

.highlight {
    background-image: url('kr.gif');
    background-size: cover;
}
