@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(fonts/roboto-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(fonts/roboto-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body, .site, .wrapper {width:100%;height:100%;padding:0;margin:0;}
html {}
body {background:#111;color:#ccc;font-family:'Roboto',Arial,sans-serif;font-weight:400;text-shadow:1px 1px 5px rgba(0,0,0,.8);}

.site {position:relative;}
.site:before {content:' ';display:block;position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;background:url("img/background.jpg") no-repeat;background-size:100% 100%;z-index:-1;}
.wrapper {display:flex;flex-direction:column;justify-content:space-between;}

h1,h2,h3,b,strong {font-weight:500;}
h1,h2,h3 {display:inline-block;text-transform:uppercase;margin:0;padding:5px 0;}
h1 {font-size:1.4em;}
h2 {font-size:1.2em;}
h3 {font-size:3.4em;display:block;text-align:center;}

header h1, main div, footer div {max-width:800px;margin:0 auto;}
header, footer, main {width:100%;box-sizing:border-box;}
header, footer {background-color:rgba(0,0,0,.6);}
header {text-align:center;padding:10px 0;}

main {padding:20px;}

.tab {flex-direction:column;justify-content:center;align-items:center;font-size:1.2em;line-height:1.4em;}
.sichtbar {display:flex;}
.unsichtbar {display:none;}

.block .titel {position:absolute;z-index:-1;top:20%;left:0;right:0;text-align:center;color:#000;font-weight:500; font-size: clamp(7em, 5vw, 10em);text-shadow:none;text-transform:uppercase;overflow:none;}
#anzahl {margin-top:40px;}

button {margin-top:20px;padding:5px 10px;font-size:1.4em;font-weight:500 !important;box-shadow:1px 1px 10px 8px rgba(0,0,0,.6);text-shadow:none;text-align:center;}
button:hover {cursor:pointer;box-shadow:1px 1px 5px 5px rgba(0,0,0,.8);}
input {margin-top:5px;padding:5px 10px;font-size:1.4em;font-weight:500 !important;border:none;text-shadow:none;text-align:center;width:125px;}

.bild {position:absolute;z-index:-1;bottom:5%;left:0;right:0;text-align:center;}
.bild img {height:45vh;width:auto;opacity:.7;}

footer {}
footer .spieler {display:flex;flex-direction:row;justify-content:center;gap:30px;}
footer .spieler .name {color:#eee;font-weight:500;}