@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Lato:300,700");

/* --- globale CSS Variablen setzen --- */
:root {
    --bgcolor-dark: rgb(49, 56, 61);
    --bgcolor-light: rgb(240, 248, 255);
    --fontcolor:  rgb(48, 48, 48);
    --fontcolor-light:  rgb(145, 145, 145);

    --maxwidth: 1000px;
}
/* --- globale CSS Eigenschaften setzen --- */
* {
    margin:0;
    padding:0;
}

html {scroll-behavior: smooth; }
h1{font-size:36px}h2{font-size:30px}
h3{font-size:24px}h4{font-size:20px}
h5{font-size:18px}h6{font-size:16px}

/* --- MENU --- */
#menu {background-color: var(--bgcolor-dark); }
#menu button{background-color: var(--bgcolor-dark); color: white; min-height: 5vh; width: 100%; border: none; font-family: 'Lato';}
#menu button:hover{background-color: var(--bgcolor-light); color: black; cursor: pointer;}
#menu button:focus{outline: 0px;}

/* --- BODY --- */
body {
    min-width: 690px;
    background-color: rgb(199, 205, 209);
    font-family: 'Lato';
}

/* --- BANNER --- */
#banner {background-attachment: fixed;background-image: url("../img/logo.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;text-align: right;height: 95vh;color: white;}
#banner h1 {font-size: 6vh; font-weight: 600; padding: 2vh;}
#banner h2 {font-size: 3vh; font-weight: 200; padding: 1vh;}

/* --- CONTENT --- */
#contentcontainer {min-height: 95vh; }

/* --- TEXTBOX NEWSBOX--- */
.textbox, .newsbox {
    background-color: var(--bgcolor-light); 
    padding: 40px;
    overflow: auto;
    text-align: left;
}
/* --- TEXTBOX specific --- */
.textbox {border-radius: 0px 0px 20px 20px; margin: 0px auto 30px;}
.textbox h3 {padding: 0px 10px;}
.textbox p {color: var(--fontcolor)}

/* --- NEWSBOX specific --- */
.newsbox{border-radius: 20px; margin: 15px auto;}

/* --- SLIDESHOW --- */
.sscontainer{position: relative; display: inline-block; text-align:center; width: 100%}
.ssimg{max-width: 90%; }
.ssbtn{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap;}
.ssbtn:focus{outline: 0px; }
.ssbtn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

/* --- INFOBOX specific --- */
.infobox, .bookingbox{background-color: white; border-radius: 10px; }

/* --- BOOKINGBOX specific --- */
.infobox{width: fit-content; padding: 15px; margin: 30px; }
.infobox label{padding: 0px 5px 0px 0px;}
.infobox input{font-family: lato; font-size: medium; padding: 1px; margin: 2px 0px; }

/* --- SCOREBOARD --- */
.scoreboard{
    margin: 50px auto;
    border-spacing: 0px;
    box-shadow: 5px 5px 10px black;
    text-align: center; 
}
.scoreboard h2 {padding: auto 0px!important;}
.ballbox{position: relative;text-align: center;max-width: 35px;margin: auto; padding: 1px; font-size: 17px; font-weight: bold; display: inline-block;;}
.ballbox p{color: white; text-shadow: 0px 0px 3px black; }
.whitespace{height: 5px;}
.bggreen{background-color: green; color: white}
.bgsand{background-color: wheat; color: darkblue; }
.bgwhite{background-color: white; color: black; }
.bggreen-offline{background-color: rgb(110, 110, 110); color: rgb(230, 230, 230)}
.bgsand-offline{background-color: rgb(199, 199, 199); color: rgb(68, 68, 68); }
.bgwhite-offline{background-color: rgb(231, 231, 231); color: rgb(58, 58, 58); }


/* --- CONFIRM MESSAGE --- */
#confirmMessage {color: green; margin: 10px;}
/* --- ERROR MESSAGE --- */
#errorMessage {color: red; margin: 10px;}

/* --- FOOTER --- */
#footer {
    background-color: var(--bgcolor-dark);
    color: var(--fontcolor-light);
    padding: 2em 0;
    text-align: center;
}

/* --- Textanordnung --- */
.alignleft{text-align: left;}
.alignright{text-align: right; }
.aligntop{vertical-align: top; }
.alignbottom{vertical-align: bottom; }
.aligncenter{text-align: center; }
.centered {position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);-ms-transform:translate(-50%,-50%);}

.fullwidth{width: 100%; }
.maxwidth{max-width: var(--maxwidth); margin: 0px auto;}
.quarterwidth{width: 25%; }

.inline{display: inline-block; }

/* --- Tabellenoptionen --- */
.nicetable{}

/* --- FLAOT --- */
.left{float: left}

/* --- DISPLAY --- */
.display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}

/* --- BOX-SHADOW ---*/
.shadow {box-shadow: 1px 1px 2px lightgray; }

/* --- clearfix --- */
.clearfix::before,.clearfix::after {content: " ";display: table;} 
.clearfix::after {clear: both;}
.clearfix {*zoom: 1; /* Für den IE6 und IE7 */}