html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Verhindert Scrollen */
}


body {
    background: #eee;
    color: #222;
    font-family: Sans, Courier, monospace;
    text-transform: uppercase;
    font-size: 16pt;
    font-weight: bold;
    line-height: 1.4em;
}

.clearer {
    clear: both;
}


.container {
    display: grid;
    grid-template-rows: auto 1fr; /* Erste Zeile automatisch, zweite Zeile nimmt den Rest ein */
    height: 100%;
}
.row1 {
    display: grid;
    grid-template-columns:1fr 4fr 1fr; /* 2/3 und 1/3 Aufteilung */
    background-color: #f0f0f0; /* Hintergrundfarbe der ersten Zeile */
}
.row2 {
    display: grid;
    grid-template-columns:1fr 4fr 1fr; /* 2/3 und 1/3 Aufteilung */
    height: 100%; /* Nimmt den gesamten verfügbaren Platz ein */
}
.cell {
    padding: 10px; /* Innenabstand */
    border: 1px solid #ccc; /* Rahmen */
}
.cell1 {
    background-color: #F2F2F2; /* Hintergrundfarbe der linken Zelle */
}
.cell2 {
    background-color: #FAFAFA; /* Hintergrundfarbe der rechten Zelle */
}
.cell3 {
    background-color: #F2F2F2; /* Hintergrundfarbe der rechten Zelle */
}

.scontainer {
    display: flex;
    flex-wrap: wrap;
    width: 100%; /* Breite der Container */
    text-align: center;
}
.scell {
    width: 7vw; /* Breite der Zellen */
    height: 8vh; /* Höhe der Zellen */
    margin: 5px;
    background-color: #ffffff;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vh;
    border-radius: 5px;
}




canvas.Ziel {
    width: 500px;
    height: auto;
    max-width: none;
    max-height: none;
    border:0px solid grey;
    object-fit: cover;
    margin: 0px;
    float: center;
    border: none;
    outline: none;
}

.left {
    flex: 2;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

.right {
    flex: 1;
    padding: .1vh;
}

.cssdiscipline {
    text-align: center;
    font-size: 2vh;
}

.cssshooter {
    text-align: center;
    font-size: 5vh;
}

.stand {
    text-align: center;
    color: #ffffff;
    background-color: #585858;
    font-size: 5vh;;
}

.sum {
    text-align: center;
    background-color: #ffffff;
    font-size: 6.5vh;
    line-height: 7.75vh;
}

.serien {
    text-align: center;
    background-color: #ffffff;
    font-size: 7vh;
    line-height: 7.75vh;
}

.zeit {
    text-align: center;
    background-color: #fff;
    font-size: 4vh;
    line-height: 7.75vh;
    font-weight: 400;
}

.values {
    background-color: #fff;
    overflow: hidden;
}

.values > ul {
    font-size: 5vh;
    line-height: 8.5vh;
}

.values > ul > li {
    text-align: left;
}

.values > ul > li > .number {
    text-align: right;
    width: 30%;
    display: inline-block;
    font-weight: 100;
}

.values > ul > li > .value {
    text-align: right;
    width: 70%;
    display: inline-block;
    font-weight: 1000;
}