@charset "UTF-8";
/* CSS Document */
	
	/* DEFAULT LAYOUT */
	
	html { height:100%; padding:0 0 0 0;}
	
	body {
		font-family: 'Roboto Condensed', arial, sans-serif;
		height:100%;
	}
	
	* { margin: 0; padding: 0;  -webkit-box-sizing: border-box; box-sizing: border-box; }
	
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
	form,fieldset,input,textarea,p,blockquote,th,td, select, aside, header, main, footer, section, address, button, option, nav {
		font-family: 'Roboto Condensed', arial, sans-serif;
		font-weight:300;
		font-size:1em;
		line-height:1.5em;
		text-align:left;
		box-sizing:border-box;
		word-wrap: break-word;
	}
	
	a, a:link, a:focus, a:hover { text-decoration: none; color:inherit; border-radius: 5px; }
	
	input[type="date"], input[type="text"],input[type="password"], textarea, select { border:1px solid #999; padding:0.2em; box-sizing: border-box; font-size:0.9em; }
	input[type="text"],input[type="password"] { border-radius:0px;}
	
	h1 { font-size:1.9em; margin:1em 0 0.5em 0; padding:0; line-height:1em; text-align:center; }
	h2.subH1 { font-size:1.5em; margin:0em 0 0em 0; padding:0; line-height:1.5em; text-align:center; }
	h2.subTitel { border-radius:5px; background-color:rgba(151, 206, 229, 1); font-weight:400; display: inline-block; font-size:1.2em; margin:0.5em 0 0em 0; padding:0.4em; line-height:1.2em; text-align:left; }
	
	h2 { font-size:1.2em; margin:0.5em 0 0em 0; padding:0; line-height:1.5em; }
	h2.Fragebogen { text-transform: uppercase; font-weight:bold; font-size:1.2em; margin:2em 0 0em 0; padding:0; line-height:1.5em; }
	h2.navigation {font-weight:bold;}
	h3 { font-size:1.1em; margin:0.5em 0 0.5em 0; padding:0; line-height:1.6em; font-weight: 400; }
	h4 { font-size:1em; margin:0.5em 0 0.5em 0; padding:0; line-height:1.4em; }
	h5 { font-size:1em; margin:0.5em 0 0.5em 0; padding:0; line-height:1.4em; }

	form { display: block; }
	.label {display:inline-block;}

	address { font-style: normal; padding:0.2em 0 0 0; }
	table { width:100%; border-collapse:collapse; margin:0 0 2em 0;}
	td, th { padding:0.2em; }
	th { background-color: #f3f3f3; font-weight: bold; }

	section {display:block; }
	
	blockquote { padding:0.5em 0.5em 0.5em 1em; margin:0.5em 0 0.5em 0; border:0px solid #111; border-radius:4px;}
	
	ul { margin:0 0 0.5em 2em;}
	li { line-height:1em; margin-bottom:1em;}

	select { border:1px solid #000; box-sizing:border-box; border-radius:5px; }
	option { padding-left:0.5em;}
	 
	button span, a span { display:none; padding:0; margin:0; }
	
	p { padding:0; margin:0 0 0.5em 0; text-align:justify; font-size:1em; }
	
	pre { 
		white-space: pre-wrap;       /* css-3 */
		white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
		white-space: -pre-wrap;      /* Opera 4-6 */
		white-space: -o-pre-wrap;    /* Opera 7 */
		word-wrap: break-word; 
	} 
	
	input:focus,
	select:focus,
	textarea:focus,
	button:focus {
	    outline: none;
	}
	
	button:hover { cursor:pointer; background-color:rgba(123, 230, 123, 0.50); }
	button { color:#333; border-radius:5px; border:1px solid #fefefe; margin:0.5em 0; padding:0.5em; background-color:rgba(221, 221, 221, 0.50); }
	button.showCurrentResult { padding:0.1em 0.4em 0.1em 0.4em; margin:0 0; }
	button.bingo { background-color:rgba(123, 230, 123, 0.77); }
	button.bingoHell { background-color:rgba(123, 230, 123, 0.20); }
	button.false { background-color:rgba(230, 121, 121, 0.77); }
	
	hr {clear:both; height:1px; border:0; margin:0; padding:0; }
	hr.border {clear:both; height:1px; border-bottom:1px solid #888; margin:0; padding:0; }

	strong { font-weight: 400;}

	img {border-radius:5px; }
	
	/* def */
	.txtCenter {text-align: center;}

	/* LAYOUT */ 
	.container { margin:0px 2em 1em 2em; border:0px solid red; }
	.loginForm {line-height:2em;}
	.loginForm label { font-weight:400; display:block; width:100%;}
	.loginForm input {display:block;  width:100%;  margin-bottom:0.5em; border-radius:5px;}
	.loginForm input[type="submit"] { font-weight:400; margin-top:0.5em; display:block; text-align:center; width:100%; background-color:#f1f1f1; border:0; padding:0.3em; }
	
	.list-container {display:flex; align-content:stetch; align-items:flex-start; }
	.teaser { position:relative; overflow:hidden; display: inline-block; margin:1%; width:30%; border:1px solid #e3e3e3; padding:1em; }
	.teaser img {width: 100%; border:0px solid #e8e8e8; }
	.teaser h2 {font-weight: 400; text-align: center; }
	.teaser p {font-size:0.8em; margin:0 0 0.5em 0;}
	.linkProduct { height:40px; display:inline-block; padding:0.3em 0.5em 0.3em 0.5em; border:1px solid orange; color:#111; background-color:rgba(255, 193, 33, 1); margin-top:0.4em;}
	.linkProduct:hover { border:1px solid orange; color:#111; background-color:rgba(255, 193, 33, 0.7); }
	
	.addBasket { background: #fff url('/img/add_basket_sw.svg') no-repeat; 
    background-position: 4px 4px;
    background-size: 30px 30px;
    height:40px; 
    width:40px;
    display:inline-block; 
    padding:0.3em 0.5em 0.3em 0.5em; border:1px solid orange; color:#111; background-color:rgba(255, 193, 33, 1); margin-top:0em;}
	.addBasket span {display: none;}
	.addBasket:hover { border:1px solid orange; color:#111; background-color:rgba(255, 193, 33, 0.7); }
	
	.box { vertical-align:top; position:relative; text-align: center;}
	.box .mTop { margin-top:0.3em; }
	
	.boxFrage {margin:1em 0; padding:1em;}

	.divSelect { padding:0.5em 0.5em 0.3em 0.5em; font-weight:400; display:inline-block; border-radius:5px; border:1px solid #fff; text-align:center; }
	.amountSelect { font-size:0.8em; margin:0 0.2em 0.2em 0.2em; background-color:#e6e6e6; border-radius: 30px; line-height:28px; border:1px solid #e6e6e6; height:30px; width:30px; display:inline-block; text-align:center;}
	.amountSelect:hover, .amountSelect.on { background-color:#c7f5e0;}
	.euroButton { font-weight:bold; margin:0 0.2em 0.2em 0.2em; background-color:#e6e6e6; border-radius: 30px; line-height:28px; border:1px solid #e6e6e6; height:30px; width:30px; display:inline-block; text-align:center;}
	
	.boxAbo .amountSelect:hover, .boxAbo .amountSelect.on {color:#fff; background-color:rgba(0, 0, 0, 0.5);}
	
	.footer { background-color:#f7f7f7; vertical-align: top; font-size: 0.9em; padding:2em;}
	.footerBox { width:31%; display:inline-block; margin:1%;vertical-align: top; }
	.wonMsg {position:relative; width:80%; left:10%; top:60%; text-align:center; display:inline-block; background-color:#f79898; padding:0.5em; border-radius:5px; color:#fff; font-weight: 400;}
	.bgWonMsg {position:absolute; top:0; left:0; width: 100%; height: 100%; z-index:200; background-color: rgba(0,0,0,0.6)}
	.wonMsgWin {position:relative; width:80%; left:10%; top:60%; text-align:center; display:inline-block; background-color:#77e89b; padding:0.5em; border-radius:5px; color:#fff; font-weight: 400;}
	.bgWonMsgWin {position:absolute; top:0; left:0; width: 100%; height: 100%; z-index:200; background-color: rgba(0,0,0,0.3)}
	
	.content { max-width:1200px; width:100%; vertical-align:top; margin:1em auto; }
	
	.borderTop { border-top:1px dotted #999; padding-top:2em; }
	
	.boxFirm { margin-left:75%; width:25%; display:inline-block; }
	.boxCustomer { margin-top: 2em; }
	.boxMsgInvoice { margin:1em 0 1em 0; display:inline-block; padding:0.5em; font-size:0.9em; border-radius:5px; background-color:#ffdb65; }
	.boxLogin { text-align:center; width:44%; vertical-align:top; margin-right:10%; display:inline-block; }
	.boxLoginRight {width:44%; vertical-align:top; display:inline-block;}
	
	.boxProfil { margin-bottom:2em; padding:1em; background-color:#f3f3f3; border:1px solid #e6e6e6; }
	.boxProfil .buttonProfil { display:inline-block; border:1px solid #fff; padding:0.3em; background-color:#111; color:#fff; margin-left:0.5em; }
	.boxSocialMedia { margin-top:0.5em; text-align: center;}
	.boxStatus {position:relative; z-index:49; padding:0em; border-radius:5px; background-color:#f2f2f2; margin-top:0; width:100%; height:30px;}
	.boxShare {position:relative; z-index:49; padding:0em; border-radius:5px; background-color:#fff; margin:0 0 0.5em 0; width:100%; height:30px; text-align: center;}
	.boxDone { position:absolute; top:0; left:0; z-index:100; padding:0.2em; border-radius:5px; background-color:rgba(35, 219, 247, 0.2); height:30px;}
	.boxStatusMsg {display: block; position: absolute; z-index:200; top:0; left:0; height:30px; padding:0.2em;}
	.boxAbo { font-weight:400; margin-top:0.5em; padding:0.4em; border-radius:5px; border:1px solid orange; color:#111; background-color:rgba(255, 193, 33, 1);}
	.parameter { padding:0.3em 1em 1em 1em; background-color:rgba(0,0,0,0.05); border-radius:5px;}
	
	.productPaket { text-align:center; background-color: #f2f2f2; border:1px solid #555; width:30%; padding: 2em; margin:1em 1em; border-radius:5px; float:left;}
	.productPaket.on { border:4px solid #555;}
	.productPaket .token { background-position: 0px 0px; background-size: 100% 64px; display:inline-block; width:30%; height:64px; }
	.nbAbo { text-align:center; font-size: 3.5em; font-weight: bold; margin:0 0 0 0; vertical-align: middle; line-height:64px;}
	
	.teaserAbo{ font-size: 3em; font-weight: bold; margin:0 0 1em 0; display: block;}
	.preisAbo { text-align:center; font-size: 1.5em; margin:0.5em; }
	
	.addProduct { display:none; color:#111; background-color:rgba(255, 193, 33, 0.95); border-radius:0px; padding:1em; position:fixed; top:0; left:0; width:100%; }
	
	.hBg { background-color:#ffdb65; border-radius:5px; padding:0.5em; }
	
	.close { display:inline-block; float:right; border-radius:25px; width:25px; height:25px; text-align: center; border:1px solid #111; background-color: #111; color:#fff; }

	.select { width:100%; display: block; border:1px solid #999; margin-bottom:0.5em;  padding:0.3em;}

	.show {display:block;}
	.hide {display:none;}

	/* cookie */
	.cookie { color:#fff; width:100%; text-align: center; background-color: rgba(0,0,0,0.7); display:block; padding:10px; position: fixed; bottom:0; left:0;}
	.cookie button { border:0; padding:2px 5px 2px 5px;}
	
	/* PAGINATION */
	.pagination { margin-top:1em; border:0px solid red;}
	.pagination a { color:#fff; display:inline-block; font-size: 0.9em; padding:0.3em; background-color:rgba(0, 0, 0, 1); font-weight:400; }
	.pagination a:hover , .pagination a.on { background-color:rgba(151, 206, 229, 1); color:#111; }
	
	/* MSG */
	.msgError { width:100%; z-index:1000; position:fixed; top:0px; padding:1em; text-align: center;  background-color:#bcf4cf; border-radius:5px; }
	
	.lineHeight2 {line-height: 2.5em;}
	.floatRight {float: right;}
	.agb { width:50%;  margin:2em auto;}
	.bold {font-weight: bold;}
	.bold400 {font-weight: 400;}
	.mTop {margin-top:1em;}
	.w100 {width:100%;}
	
	.typeButton {border:1px solid #eaeaea; border-radius: 5px; padding:0.3em; background-color: #f2f2f2; font-weight: bold; }
	.typeButtonColor {border:1px solid #92e2f5; border-radius: 5px; padding:0.3em; background-color: rgba(151, 206, 229, 1); font-weight: bold; }
	
	a.linkTag { color:#fff; display:inline-block; font-size: 0.9em; padding:0.3em; margin-bottom:0.5em; background-color:rgba(0, 0, 0, 1); font-weight:400; }
	a.linkTag:hover , a.linkTag.on { background-color:rgba(151, 206, 229, 1); color:#111; }
	
	a.MenuRandom { color:rgba(165, 121, 34, 1); display:inline-block; font-size: 0.9em; padding:0.3em; margin-bottom:0.5em; background-color:rgba(255, 197, 81, 0.30); font-weight:400; }
	a.MenuRandom:hover , a.MenuRandom.on { background-color:rgba(255, 197, 82, 1); color:#111; }
	
	a.logout { display:inline-block; background-size:20px 20px; background: #fff url('/img/logout.svg') no-repeat; width:22px; height:22px; border:1px solid #fff; }
	a.login  { display:inline-block; background-size:20px 20px; background-image: url('/img/login.svg'); background-repeat:none; width:22px; height:22px; border:1px solid #fff; }
	a.delete { display:inline-block; background-size:20px 20px; background: #fff url('/img/delete.svg') no-repeat; width:22px; height:22px; border:1px solid #fff; }
	a.home   { display:inline-block; background-size:20px 20px; background: #fff url('/img/home.svg') no-repeat; width:22px; height:22px; border:1px solid #fff;}
	
	a.delete:hover, a.home:hover, a.logout:hover, a.profil:hover, a.login:hover, a.basket:hover { opacity:1; border:1px dotted #00bbff;}	
	
	.small {font-size: 0.8em; margin-top:10px;}
	.center {text-align: center;}
	.hrMobile { display: block;}
	
	.header { text-align:center; margin-top:1em; }
	.header a { margin-top:5px; } 
	.header form { display:inline-flex; vertical-align:top; margin-bottom:1em; text-align:center; font-size:1em;}
	.header label { font-weight:400; }
	.header input[type="submit"] { display:inline-block; background-color:rgba(255, 193, 33, 1); border:1px solid rgba(255, 193, 33, 1); padding:0.2em 0.4em 0.2em 0.4em; border-radius:5px; height:30px; line-height: 20px; }
	.header input[type="search"] { display:inline-block; background-color:#f2f2f2; border:1px solid #e2e2e2; padding:0.2em; border-radius:5px; height:30px; line-height: 20px; }
	
	.descriptionNavigation { padding:0.5em; border-radius:5px; border:0px solid red; background-color:rgba(221, 221, 221, 0.50);  }
	.blocErgebnis { display:none; padding:0.5em; background-color:rgba(166, 230, 166, 0.77); border:1px solid #f2f2f2; border-radius:5px; width:100%; }
	button.ergebnis { padding:0.2em; }
	
	.breakMobile { margin-left:1em; }
	
@media only screen and (max-width: 1000px) {

	.teaser { position:relative; overflow:hidden; display: inline-block; margin:1%; width:48%; border:1px solid #e3e3e3; padding:1em; }
	.footer { padding:1em 2em 1em 2em;}
	.footerBox { width:30%;}

}

@media only screen and (max-width: 500px) {
	
	.breakMobile {margin-left:0; display:block;}
	
	h2 { text-align: center; font-weight: bold; }
	
	.teaser { position:relative; overflow:hidden; display: inline-block; margin:1%; width:98%; border:1px solid #e3e3e3; padding:1em; }
	.footerBox { width:100%; display:inline-block; margin:1%; vertical-align: top; }
	.footer { padding:1em 2em 1em 2em;}
	.header input[type="search"] { display:inline-block; width:100px; background-color:#f2f2f2; border:1px solid #e2e2e2; padding:0.2em; border-radius:5px; height:30px; line-height: 20px; }
	
	.boxLogin, .boxLoginRight {	display: block; width:100%; }
	.boxLogin {margin:0em 0 3em 0;}
	
}