@font-face {
    font-family: 'Teko';
    src: url(../fonts/Teko/Teko-Regular.ttf);
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
    font-family: 'Noto+Sans+JP';
    src: url(../fonts/Noto_Sans/NotoSans-Regular.ttf);
}

@font-face {
    font-family: 'kosugi';
    src: url(../fonts/big-shoulders-text-v1-latin/big-shoulders-text-v1-latin-regular.woff);
}

@font-face {
    font-family: 'french+script';
    src: url(../fonts/FrenchScriptMT.ttf);
}

.body {
    font-family: 'Teko', sans-serif;
    margin: auto;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.kopf_leiste {
    width: 100%;
    box-sizing: border-box;
    background-color: #b8b8b8;
    color: #e8e8e8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 1vw;
    border-top-right-radius: 1vw;
}

.kopf_bc_l,
.kopf_bc_2 {
    text-indent: -9999em;
    margin-top: -0.1vw;
    background-image: url(../bilder/fb.png);
    background-position: center;
    background-size: 90% 90%;
    background-repeat: no-repeat;
    /*color: #505050;
    background-color: #505050;*/
    /* animation: perspect 10s infinite linear; */
    height: 3.5vw;
    width: 3.5vw;
    cursor: pointer;
    box-shadow: 2px 2px 1px #141212;
    border-radius: 0.8vw;
}

.kopf_bc_l {
    margin-left: 0.7em;
}

.kopf_bc_2 {
    margin-right: 0.7em;
}

.kopf_bc_l_unten {
    margin-top: 0.1em;
    background-image: url(../bilder/drehende_bc71.gif);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* animation: perspect 10s infinite linear; */
    height: 3vw;
    width: 3vw;
    border-radius: 1em;
}

.kopf_3 {
    display: flex;
    font-family: 'Roboto';
    text-align: center;
    justify-content: center;
    font-size: 2.2vw;
    color: #141212;
}

.fb {
    font-family: 'french+script', sans-serif;
    font-size: 1.25em;
}

#tisch_spiel {
    color: #f6f680;
}

.kopf_2,
.kopf_4 {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 2.6vw;
    font-family: 'Roboto';
    color: #fc0a0a;
}

#vierzehn_rest_heim_punkte,
#vierzehn_rest_gast_punkte {
    color: #c53939;
    font-family: 'Roboto';
    font-size: 2.6vw;
}

.page-wrap {
    /*font-family: 'Teko', sans-serif; */
    /*max-width: 1680px;
    max-width: 1680px; */
    margin: auto;
    padding: 0.1em;
    -webkit-appearance: none;
}

.auswahl {
    display: flex;
    background-color: #165c53;
    align-items: center;
}

.spiel8 {
    text-indent: -9999em;
    background-image: url(../bilder/nr8.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 3vw;
    width: 3.5vw;
    height: 3.5vw;
    background-color: #c6c6c6;
    border-radius: 0.3vw;
    border-radius: 0px;
    cursor: pointer;
    box-shadow: 3px 3px 1px #141212;
    -webkit-appearance: none;
}

.spiel9 {
    text-indent: -9999em;
    background-image: url(../bilder/nr9-1.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 3vw;
    width: 3.5vw;
    height: 3.5vw;
    background-color: #c6c6c6;
    border-radius: 0.3vw;
    border-radius: 0px;
    cursor: pointer;
    box-shadow: 3px 3px 1px #141212;
    -webkit-appearance: none;
}

.spiel10 {
    text-indent: -9999em;
    background-image: url(../bilder/nr10-1.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 3vw;
    width: 3.5vw;
    height: 3.5vw;
    background-color: #c6c6c6;
    border-radius: 0.3vw;
    cursor: pointer;
    box-shadow: 3px 3px 1px #141212;
    -webkit-appearance: none;
}

.spiel14 {
    margin-right: 0.6vw;
    text-indent: -9999em;
    background-image: url(../bilder/14-1.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 3vw;
    width: 3.5vw;
    height: 3.5vw;
    background-color: #c6c6c6;
    border-radius: 0.3vw;
    cursor: pointer;
    box-shadow: 3px 3px 1px #141212;
    -webkit-appearance: none;
}

.setting_menu {
    display: flex;
    justify-content: space-around;
    width: 13%;
}

.gesamt_menu {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #c6c6c6;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    padding: 0.1em;
    border-bottom-width: thick;
    border-bottom-style: solid
}

.auswahl_menu {
    display: flex;
    justify-content: center;
    justify-content: space-around;
    width: 18%;
}

.anzeige {
    box-sizing: border-box;
    display: flex;
    width: 100%;
}

.menu_reset {
    display: flex;
    justify-content: space-around;
    width: 24%;
}

.reset {
    text-indent: -9999em;
    border: 1px solid #D9DDDE;
    background-image: url(../bilder/reset1.jpg);
    background-position: center;
    background-size: 100% 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-color: #004c59;
    cursor: pointer;
    font-size: 2.4vw;
    background-color: #e8e8e8;
    border-radius: 0.5vw;
    box-shadow: 3px 3px 1px #141212;
    width: 7vw;
    /*
    margin-right: 0.7vw;
    */
}

.restart {
    text-indent: -9999em;
    border: 1px solid #D9DDDE;
    background-image: url(../bilder/restart.png);
    background-position: center;
    background-size: 100% 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-color: #004c59;
    cursor: pointer;
    font-size: 2.5vw;
    background-color: #e8e8e8;
    border-radius: 0.2em;
    box-shadow: 3px 3px 1px #141212;
    width: 7vw;
    margin-right: 0.5em;
}

.fullscreen_menu {
    display: flex;
    justify-content: space-around;
    justify-content: space-between;
}

#open_fullscreen {
    font-size: 2.5vw;
    text-indent: -9999em;
    background-image: url(../bilder/full_open.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 6.5vw;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.4vw;
}

#close_fullscreen {
    font-size: 2.5vw;
    text-indent: -9999em;
    background-image: url(../bilder/full_close.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 6.5vw;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.4vw;
}

.start_seite {
    height: 1.5em;
    font-size: 1.5em;
    border-radius: 0.2em;
}

.info {
    font-size: 2.2vw;
    border-left: 2px solid #efefef;
    border-top: 2px solid #efefef;
    color: #930216;
    border-radius: 0.4vw;
    font-family: 'Roboto', sans-serif;
    background-color: #dbdbdb;
    cursor: pointer;
    -webkit-appearance: none;
    box-shadow: 3px 3px 1px #141212;
}

input.name:focus {
    background-color: #0c72f8;
    border-radius: 0.1em;
    color: #fcfcfc;
}

.name {
    font-size: 3.5vw;
    width: 95%;
    /*background-color: #e2eaed; */
    box-shadow: 0px 0px 10px #fff;
    margin-bottom: 0.6vw;
    margin-top: 0.6vw;
    border-radius: 0.5vw;
    color: #165c53;
    /* color: #0351a2; */
    cursor: pointer;
    text-align: center;
    font-family: 'Teko', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'kosugi';
    background-color: #e2eaed;
}

.dive_name_heim {
    display: flex;
    width: 97%;
}

.div_name {
    width: 97%;
}

.div_name_save_pfeil {
    width: 3%;
}

.heim-minus,
.gast-minus,
.heim-plus,
.gast-plus,
.heim-plus_lupe,
.gast-plus_lupe,
.heim-minus_lupe,
.gast-minus_lupe {
    font-size: 1.1vw;
    text-indent: -9999em;
    background-image: url(../bilder/minus1_.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 4vw;
    width: 7vw;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.5vw;
    /*
    margin: 0.5vw;
    */
}

.heim-plus,
.gast-plus,
.heim-plus_lupe,
.gast-plus_lupe {
    background-image: url(../bilder/plus1_.jpg);
}

.heim,
.gast {
    font-family: 'kosugi';
    width: 50%;
    text-align: center;
    box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    border-style: groove;
    border-width: 0.4em;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 1.5em;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.heim-auswerten,
.gast-auswerten {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 99%;
    padding-top: 0.5vw;
    padding-bottom: 1.2vw;
    height: 2.5vw;
}

.heim_reset,
.gast_reset {
    width: 90%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.antoss_heim,
.antoss_gast {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heim-punkte,
.gast-punkte {
    font-size: 20.5vw;
    font-family: 'Teko', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Noto Sans JP', sans-serif;
    font-family: sans-serif;
    font-family: 'kosugi';
    cursor: pointer;
}

.heim-anzeige,
.gast-anzeige {
    border-radius: 1.5vw;
    text-align: center;
    background-color: #e2eaed;
    border-style: solid;
    border-width: 0.3vw;
    width: 98%;
    margin: auto;
    margin-bottom: 0.4vw;
    /* background-position: center; */
    background-size: 100% 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

.satz_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1em;
    width: 39%;
    margin-left: 0.1em;
    -webkit-appearance: none;
}

.shot_out {
    font-family: 'Noto Sans JP', sans-serif;
    text-indent: -9999em;
    background-image: url(../bilder/shootout.png);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.2em;
    width: 8vw;
    height: 3.5vw;
    /*
    font-size: 1.1em;
    margin-right: 0.5vw;
    */
    -webkit-appearance: none;
}

.satz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1em;
    border-style: solid;
    border-width: 0.4vw;
    border-radius: 0.4vw;
    width: 100vw;
    margin-left: 2vw;
    -webkit-appearance: none;
}

.race {
    display: flex;
    -webkit-appearance: none;
}

.label_race_to {
    background-color: lightskyblue;
    color: #0a0a0a;
    font-size: 2vw;
    border-top-left-radius: 0.4vw;
    border-bottom-left-radius: 0.4vw;
    -webkit-appearance: none;
}

.input_race_to {
    background-color: lightskyblue;
    color: #0a0a0a;
    width: 5vw;
    font-size: 2vw;
    border-top-right-radius: 0.4vw;
    border-bottom-right-radius: 0.4vw;
    -webkit-appearance: none;
}

.mehr_race_to {
    font-family: 'Noto Sans JP', sans-serif;
    text-indent: -9999em;
    background-image: url(../bilder/plus25_.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 5vw;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.4vw;
    font-size: 2vw;
    -webkit-appearance: none;
}

.plus_race_to,
.minus_race_to {
    text-indent: -9999em;
    background-image: url(../bilder/plus1_.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 5vw;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.4vw;
    font-size: 2vw;
    -webkit-appearance: none;
}

.minus_race_to {
    margin-left: 0.3vw;
    background-image: url(../bilder/minus1_.jpg);
    -webkit-appearance: none;
}

.endleiste_zehn,
.endleiste_neun,
.endleiste_acht {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    background-color: #c6c6c6;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    justify-content: space-between;
    /* margin: 0.2em; */
    border-radius: 0.2em;
    align-items: center;
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

.zehn_ball {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.5em;
    width: 20%;
    border-radius: 0.2em;
}

.s14 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.endleiste_vierzehn {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    background-color: #c6c6c6;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin: 0.2em;
    border-radius: 0.2em;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

.kugel {
    display: flex;
    /* flex-grow: 3; */
    width: 70%;
    justify-content: flex-start;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.aktion {
    display: flex;
    flex-wrap: wrap;
    /* flex-grow: 1; */
    width: 30%;
    justify-content: space-around;
    align-items: center;
}

.spiel8ball {
    background-image: url(../bilder/spiel8.jpg);
    font-size: 2.3vw;
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 13vw;
    background-color: #c6c6c6;
    border-radius: 0px;
    cursor: pointer;
    border-radius: 0.2em;
    -webkit-appearance: none;
}

.spiel10ball {
    background-image: url(../bilder/Spiel-10.jpg);
    margin-left: 0.2em;
    font-size: 1.9em;
    text-indent: -9999em;
    padding: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 19vw;
    background-color: #c6c6c6;
    border-radius: 0px;
    cursor: pointer;
    border-radius: 0.2em;
    -webkit-appearance: none;
}

.spiel9ball {
    background-image: url(../bilder/Spiel-9.jpg);
    margin-left: 0.2em;
    font-size: 1.9em;
    text-indent: -9999em;
    padding: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 6em;
    background-color: #c6c6c6;
    border-radius: 0px;
    cursor: pointer;
    border-radius: 0.2em;
    -webkit-appearance: none;
}

.foul,
.break_foul,
.player,
.back_undo,
.back_redo {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2vw;
    padding: 0.2vw;
    border-radius: 0.4vw;
    height: 3.5vw;
    -webkit-appearance: none;
    box-shadow: 3px 3px 1px #141212;
    background-color: rgb(240, 236, 236);
    cursor: pointer;
    -webkit-appearance: none;
}

.back_undo,
.back_undo_lupe {
    width: 2.8em;
    background-color: dodgerblue;
    background-image: url(../bilder/undo.jpg);
    background-position: center;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    cursor: pointer;
    text-indent: -9999em;
}

.back_redo,
.back_redo_lupe {
    width: 2.8em;
    background-color: dodgerblue;
    background-image: url(../bilder/redo.jpg);
    background-position: center;
    background-size: 100% 60%;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 0.4vw;
    text-indent: -9999em;
    margin-right: 0.3vw;
}

.redo_platzhalter {
    text-indent: -9999em;
    width: 3em;
    background-color: #c6c6c6;
}

.break_foul {
    background-color: orangered;
}

.new_rack {
    margin-left: 0.4em;
    font-size: 2.5em;
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 150%;
    background-repeat: no-repeat;
    width: 1.6em;
    background-color: #165c53;
    border-radius: 0px;
    cursor: pointer;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.2em;
    background-image: url(../bilder/14-1-break.jpg);
}

.ball8,
.ball9,
.ball10 {
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 3.5vw;
    width: 3.5vw;
    background-color: #c6c6c6;
    cursor: pointer;
    border-radius: 0.2vw;
    margin-left: 0.3vw;
}

.ball8_r,
.ball9_r,
.ball10_r {
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 3.5vw;
    width: 3.5vw;
    background-color: #c6c6c6;
    cursor: pointer;
    border-radius: 0.2vw;
    margin-right: 0.3vw;
}

.ball8,
.ball8_r {
    background-image: url(../bilder/drehende_8.gif);
}

.ball9,
.ball9_r {
    background-image: url(../bilder/drehende_9.gif);
}

.ball10,
.ball10_r {
    background-image: url(../bilder/drehende_10.gif);
}


/*

.player

{  margin-left:1.8em;

}

 */

.foul {
    width: 4em;
    background-color: whitesmoke;
}

.b1,
.b2,
.b3,
.b4,
.b5,
.b6,
.b7,
.b8,
.b9,
.b10,
.b11,
.b12,
.b13,
.b14,
.b15 {
    /*font-size: 1.9em;*/
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 3.5vw;
    width: 3.5vw;
    background-color: #c6c6c6;
    cursor: pointer;
    border-radius: 0.4vw;
    margin-bottom: 0.1vw;
    margin-top: 0.1vw;
    box-shadow: 3px 3px 1px #141212;
    margin-right: 0.9vw;
}

.b1,
.l_b1 {
    background-image: url(../bilder/1.jpg);
    margin-left: 0.4vw;
}

.b2,
.l_b2 {
    background-image: url(../bilder/2.jpg);
}

.b3,
.l_b3 {
    background-image: url(../bilder/3.jpg);
}

.b4,
.l_b4 {
    background-image: url(../bilder/4.jpg);
}

.b5,
.l_b5 {
    background-image: url(../bilder/5.jpg);
}

.b6,
.l_b6 {
    background-image: url(../bilder/6.jpg);
}

.b7,
.l_b7 {
    background-image: url(../bilder/7.jpg);
}

.b8,
.l_b8 {
    background-image: url(../bilder/nr8.jpg);
}

.b9,
.l_b9 {
    background-image: url(../bilder/nr9-1.jpg);
}

.b10,
.l_b10 {
    background-image: url(../bilder/nr10-1.jpg);
}

.b11,
.l_b11 {
    background-image: url(../bilder/11.jpg);
}

.b12,
.l_b12 {
    background-image: url(../bilder/12.jpg);
}

.b13,
.l_b13 {
    background-image: url(../bilder/13.jpg);
}

.b14,
.l_b14 {
    background-image: url(../bilder/14.jpg);
}

.b15,
.l_b15 {
    background-image: url(../bilder/15.jpg);
}

.zusatz_aufn,
.zusatz_aufn_anzeige,
.zusatz_gd,
.zusatz_gd_anzeige,
.zusatz_hs,
.zusatz_hs_anzeige,
.zusatz_foul_anzeige,
.zusatz_foul {
    font-size: 2.8vw;
}

.heim_14 {
    display: flex;
    justify-content: space-around;
    font-family: 'Roboto', sans-serif;
    /* position: absolute; */
    margin-top: -3em;
}

.div_aufschreibung {
    margin-left: 1vw;
    width: 94%;
    display: flex;
    font-family: 'Roboto', sans-serif;
    position: absolute;
    margin-top: -2.1vw;
    /*background-color: rgb(240, 236, 236);*/
    overflow: hidden;
    border-radius: 0.2em;
}

.mantinell {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5em;
    position: absolute;
    margin-top: 0.6em;
    animation: perspect 10s infinite linear
}

@keyframes perspect {
    0% {
        transform: perspective(300px) rotateY(0deg)
    }
    25% {
        transform: perspective(300px) rotateY(90deg)
    }
    50% {
        transform: perspective(300px) rotateY(180deg)
    }
    75% {
        transform: perspective(300px) rotateY(270deg)
    }
    100% {
        transform: perspective(300px) rotateY(360deg)
    }
}

.endleiste {
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    background-color: #c6c6c6;
    margin: 0em;
    border-radius: 0.2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.2em;
    -webkit-appearance: none;
    border-bottom-width: thick;
    border-bottom-style: solid;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

.schrift {
    width: 12%;
    display: flex;
    justify-content: space-between;
}

.anleitung_name {
    display: flex;
    width: 25%;
    justify-content: space-between;
    align-items: center;
}

#verbandsname {
    text-align: center;
}

.checkbox {
    width: 7%;
}

.anleitung {
    font-size: 1.5vw;
    border-radius: 0.2em;
    background-color: rgb(240, 236, 236);
    border-radius: 0.2em;
    text-align: center;
    box-shadow: 3px 3px 1px #141212;
    align-items: center;
    padding: 0.3em;
    -webkit-appearance: none;
}

.tafel {
    font-size: 1.9vw;
    border-radius: 0.2em;
    -webkit-appearance: none;
    box-shadow: 3px 3px 1px #141212;
    background-color: rgb(240, 236, 236);
}

.schrift_g,
.schrift_k,
.verlauf {
    margin-left: 0.2em;
    text-indent: -9999em;
    padding: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 0em;
    font-size: 1.3vw;
    width: 3.8vw;
    height: 2.8vw;
    background-color: #c6c6c6;
    border-radius: 0.2vw;
    box-shadow: 3px 3px 1px #141212;
    cursor: pointer;
}

.schrift_g {
    background-image: url(../bilder/schrift_g.jpg);
}

.schrift_k {
    background-image: url(../bilder/schrift_k.jpg);
}

.verlauf {
    background-image: url(../bilder/verlauf_leer.png);
    background-color: #f1f1f1;
}

.stopp_zeit {
    display: flex;
    width: 22%;
    text-align: center;
    justify-content: center;
}

.zeit {
    width: 20%;
    font-size: 2.1vw;
    border-radius: 0.2em;
    background-color: #ffffff;
    -webkit-appearance: none;
    text-align: center;
}

.zeit_2 {
    font-size: 1.9vw;
    border-radius: 0.4vw;
    background-color: #ffffff;
    -webkit-appearance: none;
    text-align: center;
    padding-left: 0.3vw;
    padding-right: 0.3vw;
    margin: 0.2em;
}

.endleiste_zeit {
    font-size: 1.9vw;
    border-radius: 0.4vw;
    background-color: #ffffff;
    -webkit-appearance: none;
    text-align: center;
    padding-left: 0.3vw;
    padding-right: 0.3vw;
    margin: 0.2em;
}

.start {
    width: 24%;
    font-size: 1.8vw;
    border-radius: 0.4vw;
    background-color: #e8e8e8;
    -webkit-appearance: none;
    text-align: center;
    box-shadow: 3px 3px 1px #141212;
}

.zeit_14 {
    background-color: #ffffff;
    border-radius: 0.2em;
    text-align: center;
    font-size: 1vw;
    -webkit-appearance: none;
}

.schrift {
    display: flex;
    justify-content: space-between;
}

.tabelle {
    display: flex;
    justify-content: space-around;
}

#tabelle_heim,
#tabelle_gast {
    font-family: 'Roboto';
    text-align: center;
    width: 30%;
}

.tabelle_heim th {
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}

.tabelle_heim td {
    padding: 8px;
    border-style: solid;
    border-color: #666666;
}

.punkte {
    width: 70%;
}

.tabelle_einzel_div {
    display: flex;
    justify-content: center;
    font-family: 'Roboto';
    text-align: center;
    font-size: 1.8em;
}

.tabelle_einzel {
    width: 45%;
}

.tabelle_einzel th {
    background-color: #dedede;
    width: 45%;
}

.sync {
    background-color: lightgreen;
    font-size: 0.8em;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.2em;
    height: 4em;
    width: 3.5em;
    border-radius: 0.4em;
}

input.form-submit {
    -webkit-appearance: none;
}

.zurueck {
    font-size: 2em;
    background-color: #D9DDDE;
    box-shadow: 5px 5px 10px #141212;
    border-bottom: 0.2em solid #930216;
    -webkit-appearance: none;
}

.zurueck :hover {
    background-color: rgb(255, 224, 122);
}

.anstoss_oeffnen {
    text-indent: -9999em;
    margin-top: 0.2vw;
    background-image: url(../bilder/anstoss.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #e8e8e8;
    font-size: 2.5vw;
    text-align: center;
    border-radius: 0.4vw;
    width: 5.5vw;
    height: 3.5vw;
    box-shadow: 3px 3px 1px #141212;
    cursor: pointer;
    -webkit-appearance: none;
}

.anstoss {
    border-radius: 0.4em;
}

.auswahl_anstoss {
    position: absolute;
    margin-top: -0.2vw;
    z-index: 1;
    background-color: whitesmoke;
    width: 98%;
    box-sizing: border-box;
    margin-top: 0.8vw;
    padding-bottom: 1em;
    border-radius: 0.6vw;
    -webkit-appearance: none;
}

.anstoss {
    width: 100%;
    background-color: #b9e2d6;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.oben {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    margin-bottom: 0.5em;
    justify-content: center;
}

.unten {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5vw;
}

.div_anstoss_close {
    margin-top: 1em;
}

.anstoss_close {
    border-radius: 0.2em;
    box-shadow: 1px 1px 1px #141212;
    padding: 0.005em;
    padding-left: 0.8em;
    padding-right: 0.8em;
    -webkit-appearance: none;
}

.rb_l,
.rb_2,
.rbl_u,
.rb_l_span,
.rb_l_gewinner,
.rb_l_gast {
    font-size: 2.1vw;
    margin-left: 1vw;
}

.rb_l_gast {
    margin-left: 2.2em;
}

.rb_l_gewinner {
    margin-left: 0.2vw;
}

.rb_l_span {
    display: inline-block;
    margin-right: 2vw;
    color: red;
}

.rb_2 {
    margin-left: 7.2vw;
}

.rbl_u {
    margin-left: 0.1vbw;
}

.spiel_auf,
.chk_antoss,
.chk_gewinner {
    background-color: beige;
}

.div_gewinnspiel {
    display: flex;
    width: 10%;
}

.break {
    width: 4vw;
    height: 3vw;
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 0.2vw;
}

.lupe {
    font-size: 1.1vw;
    text-indent: -9999em;
    background-image: url(../bilder/lupe.png);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    height: 3vw;
    width: 4vw;
    background-color: #e8e8e8;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.5vw;
    -webkit-appearance: none;
}

.lupe_close {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    width: 20%;
    background-color: #c6c6c6;
    border-radius: 0.2em;
    -webkit-appearance: none;
}

.lupe_close_label {
    font-size: 3em;
    color: red;
    width: 80%;
    font-family: 'kosugi';
    box-shadow: 3px 3px 1px #141212;
    -webkit-appearance: none;
}

.div_lupe {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #c6c6c6;
}

.oben_lupe {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #c6c6c6;
}

.unten_lupe {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #c6c6c6;
}

.l_b1,
.l_b2,
.l_b3,
.l_b4,
.l_b5,
.l_b6,
.l_b7,
.l_b8,
.l_b9,
.l_b10,
.l_b11,
.l_b12,
.l_b13,
.l_b14,
.l_b15 {
    /*font-size: 1.9em;*/
    text-indent: -9999em;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 8em;
    width: 8em;
    background-color: #c6c6c6;
    cursor: pointer;
    border-radius: 0.2em;
    margin-bottom: 0.1em;
    margin-top: 0.1em;
    box-shadow: 3px 3px 1px #141212;
    margin: 1em;
}

.nicht_lupe {
    height: 0.1em;
    width: 8em;
    margin-left: 1em;
    text-indent: -9999em;
    background-color: #c6c6c6;
    -webkit-appearance: none;
}

.nicht_lupe_m {
    height: 8em;
    width: 8em;
    text-indent: -9999em;
    background-color: #c6c6c6;
    margin-right: 1em;
    margin-top: 1em;
    -webkit-appearance: none;
}

.nicht_lupe_r {
    height: 8em;
    width: 8em;
    text-indent: -9999em;
    background-color: #c6c6c6;
    margin-left: 1em;
    margin-top: 1em;
    -webkit-appearance: none;
}

.foul_lupe,
.break_foul_lupe,
.player_lupe,
.back_undo_lupe,
.back_redo_lupe {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.0em;
    padding: 0.2em;
    border-radius: 0.2em;
    height: 3em;
    -webkit-appearance: none;
    box-shadow: 3px 3px 1px #141212;
    background-color: rgb(240, 236, 236);
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.heim-plus_lupe,
.gast-plus_lupe,
.heim-minus_lupe,
.gast-minus_lupe {
    height: 6em;
    width: 6em;
}

.heim-plus_lupe,
.heim-minus_lupe {
    margin-right: 1em;
    margin-top: 1em;
}

.gast-plus_lupe,
.gast-minus_lupe {
    margin-left: 1em;
    margin-top: 1em;
}

.heim-punkte_lupe,
.gast-punkte_lupe {
    font-size: 4em;
    font-family: 'kosugi';
    width: 15%;
    text-align: center;
}

.heim_anzeige_punkte_lupe,
.gast_anzeige_punkte_lupe {
    width: 15%;
    text-align: center;
    background-color: rgb(226, 234, 237);
}

.table_close {
    width: 100%;
}

.break_foul_lupe {
    background-color: orangered;
}

.zusatz_hs_anzeige_lupe {
    width: 10%;
    text-align: center;
    background-color: rgb(123, 200, 228);
}

.zusatz_hs_anzeige_label_lupe {
    font-size: 4em;
    font-family: 'kosugi';
    color: black;
    text-align: center;
}

.div_info {
    width: 100%;
}

.kopf_bc_l,
.kopf_bc_2,
.spiel8,
.spiel9,
.spiel10,
.spiel14,
.anstoss_oeffnen,
.fullscreen,
.info,
.minus_race_to,
.plus_race_to,
.mehr_race_to,
.name_save,
.heim-plus,
.gast-minus,
.reset,
.restart,
.schrift_g,
.schrift_k,
.tafel,
.anleitung,
.verlauf,
.b1,
.b2,
.b3,
.b4,
.b5,
.b6,
.b7,
.b8,
.b9,
.b10,
.b11,
.b12,
.b13,
.b14,
.b15,
.break_foul,
.foul,
.player,
.back_undo,
.redo_platzhalter,
.back_redo,
.back,
.heim-punkte,
.gast-punkte,
.start,
.break_foul,
.shot_out,
.div_d_foul {
    transition: transform 0.3s;
}

@media (hover: hover) {
    .kopf_bc_l:hover,
    .kopf_bc_2:hover,
    .spiel8:hover,
    .spiel9:hover,
    .spiel10:hover,
    .spiel14:hover,
    .anstoss_oeffnen:hover,
    .fullscreen:hover,
    .info:hover,
    .minus_race_to:hover,
    .plus_race_to:hover,
    .name_save:hover,
    .heim-plus:hover,
    .gast-minus:hover,
    .reset:hover,
    .restart:hover,
    .schrift_g:hover,
    .schrift_k:hover,
    .tafel:hover,
    .anleitung:hover,
    .verlauf:hover,
    .mehr_race_to:hover,
    .b1:hover,
    .b2:hover,
    .b3:hover,
    .b4:hover,
    .b5:hover,
    .b6:hover,
    .b7:hover,
    .b8:hover,
    .b9:hover,
    .b10:hover,
    .b11:hover,
    .b12:hover,
    .b13:hover,
    .b14:hover,
    .b15:hover,
    .break_foul :hover,
    .foul:hover,
    .player:hover,
    .back_undo:hover,
    .redo_platzhalter:hover,
    .back_redo:hover,
    .back:hover,
    .heim-punkte:hover,
    .gast-punkte:hover,
    .start:hover,
    .break_foul:hover,
    .shot_out:hover,
    .div_d_foul:hover {
        transform: scale(1.25, 1.25);
    }
}

.kopf_bc_l:active,
.kopf_bc_2:active,
.spiel8:active,
.spiel9:active,
.spiel10:active,
.spiel14:active,
.anstoss_oeffnen:active,
.fullscreen:active,
.info:active,
.minus_race_to:active,
.plus_race_to:active,
.name_save:active,
.heim-plus:active,
.gast-minus:active,
.reset:active,
.restart:active,
.schrift_g:active,
.schrift_k:active,
.tafel:active,
.anleitung:active,
.verlauf:active,
.mehr_race_to:active,
.b1:active,
.b2:active,
.b3:active,
.b4:active,
.b5:active,
.b6:active,
.b7:active,
.b8:active,
.b9:active,
.b10:active,
.b11:active,
.b12:active,
.b13:active,
.b14:active,
.b15:active,
.break_foul :active,
.foul:active,
.player:active,
.back_undo:active,
.redo_platzhalter:active,
.back_redo:active,
.back:active,
.heim-punkte:active,
.gast-punkte:active,
.start:active,
.break_foul:active,
.shot_out:active,
.div_d_foul:active {
    transform: scale(1.25, 1.25);
}

.div_shotout {
    display: flex;
}

.shootout_button_plus,
.shootout_button_minus {
    font-size: 2vw;
    height: 2.6vw;
    width: 2.6vw;
    text-indent: -9999em;
    background-image: url(../bilder/plus.png);
    background-position: center;
    background-size: 100% 100%;
    background-size: contain;
    text-align: center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: rgb(232, 232, 232);
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.3vw;
    -webkit-appearance: none;
}

.shootout_button_plus {
    margin-left: 0.5vw;
}

.shootout_button_minus {
    background-image: url(../bilder/minus.png);
    /* margin-right: 3vw; */
}

.shootout_button_time {
    font-size: 2vw;
    width: auto;
    -webkit-appearance: none;
}

#ladebalken {
    display: block;
    background: green;
    width: 0vw;
    border: 1px solid darkgreen;
    height: 2.6em;
    border-radius: 0.4vw;
}

#ladebalken_rot {
    display: block;
    background: red;
    width: 0vw;
    border: 1px solid darkred;
    height: 2.6em;
    border-radius: 0.4vw;
}

.div_balken {
    display: flex;
    justify-content: space-between;
    width: 75%;
    background-color: rgb(243, 236, 144);
    border-radius: 0.4vw;
}

.countdown {
    font-size: 2.8em;
    width: 5%;
    font-family: 'Roboto', sans-serif;
    color: navy;
}

.div_shot_out_heim {
    position: absolute;
    margin-top: 13.5vw;
    margin-left: 0.5vw;
}

.div_shot_out_gast {
    position: absolute;
    margin-top: 13.5vw;
    margin-left: 0.5vw;
}

.buttton_shotout_start_heim,
.buttton_shotout_extension_heim,
.buttton_shotout_start_gast,
.buttton_shotout_extension_gast,
.buttton_shotout_stop_heim {
    font-size: 4.5vw;
    border-radius: 0.4vw;
    box-shadow: 3px 3px 1px #141212;
    padding: 1vw;
    -webkit-appearance: none;
}

.buttton_shotout_start_heim,
.buttton_shotout_start_gast {
    background-color: lightgreen;
    -webkit-appearance: none;
}

.buttton_shotout_extension_heim,
.buttton_shotout_extension_gast {
    /* width: 8vw;  */
    margin-left: 23vw;
    background-color: lightgreen;
    -webkit-appearance: none;
}

.buttton_shotout_stop_heim,
.buttton_shotout_stop_gast {
    background-color: red;
}

.div_gewinnspiel {
    display: flex;
    width: 10%;
}

.div_antsoss {
    width: 99%;
    padding-bottom: 0.6vw;
    padding-top: 0.6vw;
    background-color: beige;
    display: flex;
    border: 0.1em solid black;
    box-sizing: border-box;
    margin-left: 0.5%;
}

.div_anstoss_lnks {
    width: 20%;
    background-color: beige;
}

.div_anstoss_rechts {
    width: 81%;
    background-color: beige;
    display: flex;
}

.div_anstoss_rechts_eins {
    width: 20%;
}

.div_anstoss_rechts_eins_shotout {
    width: 30%;
    display: flex;
}

.div_shootout_button_anzeige {
    display: flex;
}

.div_anstoss_rechts_zwei {
    display: flex;
}

input[type="checkbox"] {
    position: absolute;
    left: -15px;
}

input[type="checkbox"]+label::before {
    width: 2vw;
    height: 2vw;
    border-radius: 0.5vw;
    border: 2px solid black;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

input[type="checkbox"]:checked+label::before {
    box-shadow: inset 0px 0px 0px 3px #fff;
    background-color: #0e5ef1;
}

.div_name_save {
    width: 100%;
    background-color: wheat;
    text-align: center;
    align-items: center;
    font-family: 'Roboto';
    padding-top: 1em;
    padding-bottom: 1em;
    border-radius: 0.3em;
    margin-bottom: 0.5em;
}

.div_foul_anzeige {
    width: 20.5%;
}

.div_d_foul {
    display: flex;
    background-color: #e8e8e8;
    padding-left: 0.3em;
    padding-right: 0.3em;
    align-items: center;
    box-shadow: 3px 3px 1px #141212;
    border-radius: 0.5vw;
    font-family: 'Roboto';
    cursor: pointer;
    -ms-user-select: None;
    -moz-user-select: None;
    -webkit-user-select: None;
    user-select: None;
    height: 4vw;
}

.div_lbl_d_foul {
    display: flex;
    flex-direction: column;
    margin-right: 0.3em;
    cursor: pointer;
}

.lbl_foul {
    font-size: 1.1vw;
    cursor: pointer;
    -ms-user-select: None;
    -moz-user-select: None;
    -webkit-user-select: None;
    user-select: None;
}

.d_foul {
    font-size: 2.5vw;
    cursor: pointer;
    -ms-user-select: None;
    -moz-user-select: None;
    -webkit-user-select: None;
    user-select: None;
}

.fb_cue {
    width: 20%;
}