@media only screen and (max-width: 767px) {
/* Größe und Layout für 'screenshot-wrapper' festlegen */
#screenshot-wrapper {
    grid-column: 1 / span 6; /* Nimmt die gesamte Breite im Grid ein */
    display: flex;           /* Kind-Elemente nebeneinander anordnen */
    flex-direction: column;
    height: 80vw;            /* Höhe definieren, wie zuvor bei '.item1' */
    gap: 5px;                /* Optionaler Abstand zwischen den Kind-Elementen */
}

/* Kind-Elemente von 'screenshot-wrapper' gleichmäßig verteilen */
#screenshot-wrapper > div {
    flex: 1;                 /* Jedes Kind-Element nimmt gleich viel Platz ein */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
}

.grid-item,
.sub-item {
    border: 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.item1,
.item2,
.item6 {
    grid-column: 1 / span 6;
}


.grid-item.item2 {
    border-right: 0px solid black;
    border-left: 0px solid black;
    border-bottom: 0px solid black;
    border-top: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-top: -5px;
    height: 20px;
}

.item3 {
    grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}
/*Höhe Griechen*/
.item3 > .sub-item {
    height: 25vw;
}

.item3 > #chart-container-06 {
    grid-column: 1 / span 5;
    height: 40vw;
}

.item6 {
    display: flex;
    align-items: center;
    height: 150px;
    position: relative;
    border: 2px solid black;
    border-radius: 5px;
}

.value-container {
    grid-column: 1 / span 6; /* Erstreckt sich über die gesamte Breite */
    display: grid; 
    grid-template-columns: repeat(5, 1fr); /* 5 gleichmäßige Spalten innerhalb des Containers */
    gap: 5px; /* Abstand zwischen den Spalten */
    width: 100%; /* Passt sich der gesamten verfügbaren Breite an */
    font-size: 8px;
}

.value-item {
    display: flex;
    flex-direction: column; /* Label oben, Wert unten */
    align-items: flex-start; /* Text linksbündig */
    text-align: left; /* Text linksbündig */
}

.value-label {
    font-weight: bold; /* Labels fett darstellen */
}

.value-data {
    margin-top: 4px; /* Abstand zwischen Label und Wert */
    color: #555; /* Optional: Wertfarbe etwas dezenter */
}



.slider-subcontainer {
    width: 90%;
    margin: 0px 0;
    text-align: left;
}

.right-settings-section {
    width: 100%;
}

.persistent-settings-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #fff;
}

.persistent-settings-panel .checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.persistent-settings-panel .checkbox-item label {
    margin: 0;
}

input[type="range"] {
    width: 100%;
    margin: 0px 0;
}

.slider-subcontainer label {
    display: block;
    margin-bottom: 0px;
    text-align: left;
}

#leg-display-container {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 0;
    overflow: hidden;
    align-items: center;
    height: 34px;
    margin-bottom: 0;
}

#compare-choice-container,
#display-option-container,
#display-option-container-00 {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 0;
    overflow: hidden;
    align-items: center;
    height: 34px;
    margin-bottom: 0;
}

.leg-option {
    flex-direction: column;
    gap: 1px;
    line-height: 1;
    padding: 1px 3px;
    box-sizing: border-box;
}

.leg-option-label {
    display: block;
    max-width: 100%;
    font-size: 1em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leg-option-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12px;
    padding: 0 3px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-transform: uppercase;
}

.leg-option-pill.long-pill {
    background-color: #28a745;
}

.leg-option-pill.short-pill {
    background-color: #dc3545;
}
}