/* #region allgemein*/
body {
    font-size: 1em;
    background-color: rgb(233, 242, 172);
}

/* #region @media*/
@media (max-width: 800px) {
    nav {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    #lottoschein h1 {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    #getipptezahlen {
        margin-left: 5px;
    }

    #zelle2 {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    #zelle3 {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    #treffer {
        grid-column-start: 1;
        grid-column-end: 2;
    }
}

/* #endregion @media*/
#container {
    display: grid;
    justify-content: center;
    align-items: center;
}

#header {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    /* zwei Spalten */
    grid-template-rows: repeat(2, auto);
    /* zwei Zeilen */
    grid-gap: 10px;
    /* Abstand zwischen den Zellen */
    background-color: #d4efc2;
    border-radius: 11px;
}

#kugeln {
    grid-row: 1 / span 2;
    /* nimmt Zeile 1 und 2 ein */
    grid-column: 1;
    /* nimmt Spalte 1 ein */
}

#lottoschein {
    grid-row: 1;
    /* nimmt Zeile 1 ein */
    grid-column: 2;
    /* nimmt Spalte 2 ein */
    text-align: center;
    /* zentriert den Text */
    color: rgb(240, 103, 103);
    font-family: "Comic Sans MS", sans-serif;
    font-size: 3vw;
    font-weight: bold;
    font-style: italic;
    margin-left: 25%;
}

/* Bild 6 aus 49 */
.img6aus49 {
    grid-row: 2;
    /* nimmt Zeile 2 ein */
    /* grid-column: 2; */
    grid-column: 2 / span 3;
    /* nimmt Spalte 2 und 3 ein */
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    width: 80%;
    height: 50%;

}

/* Bild 6 aus 49 */
.img6aus49 img {
    max-width: 100%;
    height: auto;
}

em.full-width {
    grid-column: 1 / span 3;
}

#inhalt {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr;
    grid-template-rows: auto;
    margin-bottom: 10PX;
}

.zelle {
    text-align: center;
    margin-left: 10px;
    border-radius: 11px;
    border: solid rgb(207, 226, 211) 1px;
    background-color: rgb(212, 240, 194);
    font-weight: bold;
    color: rgb(11, 89, 56);
}

#treffer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

#zelle3 {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
}

#spielnr {
    grid-column-start: 1;
    grid-column-start: 1;
    margin-top: 10px;
    margin-left: 70px;
}

#spielscheinnr {
    grid-row-start: 1;
    grid-column-start: 2;
    margin-top: 10px;
}

#ssnr {
    width: 70px;
    text-align: center;
}

#superz {
    grid-row-start: 2;
    grid-column-start: 1;
}

#superzahl {
    grid-row-start: 2;
    grid-column-start: 2;
}

#imgm77 {
    grid-row-start: 3;
    grid-column-start: 1;
    margin-top: 10px;
}

#spiel77 {
    grid-row-start: 3;
    grid-column-start: 2;
    margin-top: 3px;
}

#Spielzahl77 {
    grid-row-start: 4;
    grid-column-start: 3;
}


#imgm6 {
    grid-row-start: 5;
    grid-column-start: 1;
    margin-top: 10px;
}

#super6 {
    grid-row-start: 5;
    grid-column-start: 2;
}

#zahlsuper6 {
    grid-row-start: 6;
    grid-column-start: 1;
}


#glueckspirale {
    grid-row-start: 7;
    grid-column-start: 1;
    margin-top: 10px;
}

#auswahlglueckspirale {
    grid-row-start: 7;
    grid-column-start: 2;
}

#zahlgluecksspirale {
    grid-row-start: 8;
    grid-column-start: 1;
}

#ziehungen {
    grid-row-start: 9;
    grid-column-start: 1;
    margin-top: 10px;
    margin-bottom: 10px;
}

#auswahlziehungen {
    grid-row-start: 9;
    grid-column-start: 2;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    width: 200px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: rgb(46, 95, 14);
    border-radius: 12px;
    box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
    color: rgb(247, 247, 247);
}

#tippreihe {
    font-style: italic;
}

#gtzr {
    grid-column: 1 / 3;
    margin-top: 20px;
    margin-bottom: -33px;
    padding: 0px;
    font-size: 1.3vw;
    font-weight: bold;
    font-style: italic;
}

#tippreihenzahlen {
    grid-column-start: 1;
    grid-column-end: 2;
    display: flex;
    position: absolute;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    overflow: hidden;
    background-color: rgb(49, 212, 86);
    border-radius: 98px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    padding: 0px;
    margin: 20px;
    user-select: none;
}


#vname {
    border: solid rgb(0, 0, 0) 2px;
    background-color: #ffebe6;
}

#eingabehilfe {
    display: grid;
    grid-gap: 10px;
    text-align: center;
    margin-left: 10px;
    border-radius: 11px;
    border: solid rgb(207, 226, 211) 1px;
    background-color: rgb(212, 240, 194);
    font-weight: bold;
    color: rgb(11, 89, 56);
    margin-bottom: 10px;
}

.namelottoschein {
    margin: 0px;
    grid-column-start: 1;
}



#fragezeichen {
    height: 20px;
    width: 40px;
}



.namelottoschein input {
    border: solid rgb(241, 10, 10) 1px;
    color: rgb(241, 10, 10);
    font-weight: bold;
    padding: 2px !important;
    background-color: white;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 300px;
}

.bezlottoschein {
    color: rgb(241, 10, 10);
    font-weight: bold;
    border: solid rgb(207, 226, 211) 1px;
}

.pwlottoschein input {
    border: solid rgb(241, 10, 10) 1px;
    color: rgb(241, 10, 10);
    font-weight: bold;
    padding: 2px !important;
    background-color: white;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 300px;
}

footer {
    margin-top: 10px;
    text-align: right;
    grid-column: 1 / -1;
    border-radius: 11px;
    border: solid rgb(207, 226, 211) 1px;
    background-color: rgb(212, 240, 194);
    font-weight: bold;
    color: rgb(11, 89, 56);
}

#kontakt {
    margin-right: 40px;
    font-family: "Comic Sans MS", sans-serif;
    font-weight: bold;
    font-style: italic;
    color: rgb(2, 46, 12);
}

#autorname {
    margin-right: 40px;
    font-family: "Comic Sans MS", sans-serif;
    font-weight: bold;
    font-style: italic;
    color: rgb(2, 46, 12);
}

/* #endregion */

/* #region lottoschein*/
html {
    font-family: sans-serif;
}

fieldset {
    border: solid rgb(0, 0, 0) 0px;
}

#getipptezahlen {
    display: grid;
    justify-content: center;
    /* align-items: left; */
    gap: .25rem;
    grid-template: repeat(7, 1.5rem) / repeat(7, 1.5rem);
    grid-template-rows: auto;
}

.reihe {
    width: 70px;
    margin-left: 5px;
    margin-right: 5Px;
    color: rgb(241, 10, 10);
    font-weight: bold;
}

#tippfeld {
    justify-content: center;
    display: grid;
    gap: .25rem;
    grid-template: repeat(7, 1.5rem) / repeat(7, 1.5rem);
}

input[type="checkbox"] {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

input[type="radio"] {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

label {
    position: relative;
    text-align: center;
    color: firebrick;
    border: thin solid;
    line-height: 1.5;
}

:checked+label::after {
    content: "×";
    position: absolute;
    left: 0;
    top: -1.15rem;
    right: 0;
    font-size: 2.5rem;
    color: darkblue;
    opacity: .6;
}

nav {
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

a {
    height: 10px;
    color: rgb(249, 248, 248);
}

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: rgb(34, 85, 14);
    border-radius: 14px;
    box-shadow: 25px 25px 25px rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 5px;
    margin: 5px;
    width: 180px;
    height: 20Px;

}

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 0;
}

a {
    display: block;
    padding: 10px;
    text-decoration: none;
}

.aktiv {
    background-color: rgb(102, 168, 4);
}

.fragezeichen {
    background-color: transparent;
}


.table {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    text-align: left;
}

#lottoscheinname {
    margin-bottom: 10px;
}

#lspw {
    margin-left: 25px;
}


/* #endregion */