@charset "utf-8";
html {
	margin: 0;
	width:100%;
	overflow-x:hidden; /* wg sich mitbewegendem viewport auf dem ipad*/
}
body {
	width:100%;
	height:100%;
	margin:0;
	text-shadow: 1px 1px #000;
	font-family: 'ubuntureg', sans-serif;
	font-size: 120%;
	letter-spacing:2px;
	background-color:#004225;/*#CFD1D0;5b0213;
	background-image: linear-gradient(to right, #940013, #e40521 5%, #e40521 60%, #940013)*/;
	color:#fff;
	overflow-x:hidden; /* wg sich mitbewegendem viewport auf dem ipad*/
	transition: transform 1s ease-in-out;
}
* html .hasheight {
	height:1%;
	}

/*********font kits *************/

@font-face {
    font-family: 'skolarregular';
    src: url('/css/webfonts/skolar-regular-pvt-webfont.eot');
    src: url('/css/webfonts/skolar-regular-pvt-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/webfonts/skolar-regular-pvt-webfont.woff') format('woff'),
url('/css/webfonts/skolar-regular-pvt-webfont.ttf') format('truetype'),
url('/css/webfonts/skolar-regular-pvt-webfont.svg#skolarregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntum';
    src: url('/css/webfonts/ubuntu-m-webfont.eot');
    src: url('/css/webfonts/ubuntu-m-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/webfonts/ubuntu-m-webfont.woff') format('woff'),
url('/css/webfonts/ubuntu-m-webfont.ttf') format('truetype'),
url('/css/webfonts/ubuntu-m-webfont.svg#ubuntum') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntumi';
    src: url('/css/webfonts/ubuntu-mi-webfont.eot');
    src: url('/css/webfonts/ubuntu-mi-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/webfonts/ubuntu-mi-webfont.woff') format('woff'),
url('/css/webfonts/ubuntu-mi-webfont.ttf') format('truetype'),
url('/css/webfonts/ubuntu-mi-webfont.svg#ubuntum') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ubuntureg';
    src: url('/css/webfonts/ubuntu-r-webfont.eot');
    src: url('/css/webfonts/ubuntu-r-webfont.eot?#iefix') format('embedded-opentype'),
url('/css/webfonts/ubuntu-r-webfont.woff') format('woff'),
url('/css/webfonts/ubuntu-r-webfont.ttf') format('truetype'),
url('/css/webfonts/ubuntu-r-webfont.svg#ubuntureg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'mardec';
    src: url('/css/webfonts/mardec.woff2') format('woff2'),
url('/css/webfonts/mardec.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'fs_bold';
    src: url('/css/webfonts/fsbold.eot');
    src: url('/css/webfonts/fsbold.eot?#iefix') format('embedded-opentype'),
url('/css/webfonts/fsbold.woff') format('woff'),
url('/css/webfonts/fsbold.svg#freightsans_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'icomoon';
	src: url('/css/webfonts/icomoon.eot');
	src: local('☺'), url('/css/webfonts/icomoon.woff') 	format('woff'), url('/css/webfonts/icomoon.ttf') 	format('truetype'), url('/css/webfonts/icomoon.svg') 	format('svg');
	font-weight: bold;
	font-style: normal;
}

.klear {
	clear:both;
	line-height:0;
	font-size:0;
	height:0;
	}
dfn, .ignore, #logo h1, .logoWrap h1 {
     position:absolute;
     left:-3000px;
     width:0;
     height: 0;
	 line-height:0;
     overflow:hidden;
     display:inline;
}
p {
	font-size:90%;
	line-height: 1.4em;
	padding-left: 10px;
	padding-right: 10px;
	margin:0;
	color:#000;
	letter-spacing:2px;
	text-shadow: 1px 1px 1px #000;
}
p.klein {
	font-size:86%;
}
#fahrraeder p {
	text-align:center;
}
h1 {
	font-size:200%;
	letter-spacing:2px;
	color:#fff;
	font-family:'mardec', sans-serif;
	margin:0 0 0.3em 0;
	text-shadow: 2px 2px #000;
}
section h1 {
	text-align:center;
}
h2 {
	font-size:170%;
	font-family:'mardec';
	letter-spacing:2px;
	color:#fff;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	margin:0;
	text-shadow: 2px 2px 1px #000;
	}
section h2 {
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	}
h3 {
	font-size:120%;
	font-family:'mardec';
	letter-spacing:3px;
	color:#8c3823;
	margin:0;
	text-shadow: 1px 1px 1px #000;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	}
section h3 {
	text-align: center;
	}
ul, li {
	margin:0;
	padding:0;
	list-style-type:none;
	}
a, a.link {
	text-decoration: none;
	color:#cc492b /*#ac3b1f*/;
	font-weight:600;
	}
.floatL {
	float:left;
	margin-right:5em;
}

.center {
	text-align:center;
}
.mi {
	font-family:"ubuntumi", sans-serif;
	letter-spacing:.03em;
}
.rotbraun {
	color: #cb3c19;
}
.rotbraunbg {
	background-color: #8c3823;
}
.blau {
	color: #279ddc;
}
.blaubg {
	background-color: #279ddc;
	color:#fff;
}
.blaubg p, .rotbraunbg .content p, .blaubg h2, .rotbraunbg .content h2 {
	color:#fff;
	font-size: 100%;
	letter-spacing:2px;
	text-shadow: 1px 1px #000;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}
.weisshg h1 {
	color:#4cbcf8;
}
.weisshg p {
    font-size:80%;
	color:#000;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
.em1_4 {
	margin-top:1.4em;
}
	


/***************layout Objekte *************/

#bodyWrap {
	position:relative;
	width:99%;
	margin:86px auto 0;
	z-index:10;
	/*border:#e1e1e1 solid;
	border-width:0 2px 2px 0;
	background:#f7f7f7;*/
	overflow:hidden;
}
#headnav {
	position:fixed;
	width:100%;
	z-index:100;
	background-color:#004225 /*121b46;
	background-image: linear-gradient(to right, #940013, #e40521 5%, #e40521 60%, #940013)*/;
}
#logo {
	width:231px;
	height:198px;
	background: url(https://www.genniges-fahrraeder.at/medien/genniges-fahrraeder-1050-wien-fahrrad-fahrrad1050-fahrradwerkstatt-fahrradservice-best-bikeshop-vienna-fahrradgeschaeft-fahrradladen-rad-mit-still.svg) no-repeat 10px;
	position:relative;
	float:left;
	padding:10px 0 0 0;
	margin-bottom:-120px;
	z-index:30;
}
#headnav #ulWrap {
	position:relative;
	width:100%;
	max-width:1350px;
	margin:0 auto;
	font-family:"ubuntureg", sans-serif;
}
#headnav #ulWrap:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}
	#headnav ul {
		float:right;
		font-family:'mardec', sans-serif;
		height:76px;
		padding:0;
		margin-top: -50px;
}
	#headnav li {
		float:left;
		display:block;
		height:86px; /*10px mehr als headnav - warum? */
		position:relative;
		white-space:nowrap;
	}
	#headnav li a {
		display:inline-block;
		padding: 83px .4em 16px;
		margin-right:.2em;
		font-size:112%; /*140% jq ?? */
		letter-spacing:0.05em;
		text-shadow:3px 3px #000;
	}
	.aktiv a, a:hover, #clickImpr:hover, #clickImpr:active {
		color:#cb3c19;
	}
	#headnav li.last a {
	}
#show-menu {
	display:none;
}

.adrFloat {	
	position:absolute;
	width:171px; /* wie #logo*/
	top:210px;
	left:0;
	padding-left:27px;
	text-align:center;
	backdrop-filter:blur(3px);
	z-index:4;
}
	.adrFloat .content p {
	    font-size:80%;
		padding:0.8em 0 0 0;
		color:#fff;
		margin-top: -10%;
		text-shadow:1px 1px 1px #000;
	}
	.adrFloat a, a.link {
		font-weight:normal;
	}
	#tel {
		display:none;
	}
		
	td.abstand {
		width:35px;
	}
/************* end headnav *****/

/****************** Hauptbild + ***********/

#videoWrap {
	position:relative;
	text-align:center;
	overflow:hidden;
}
#overlay {
	position:absolute;
	width:100%;
	background-color: rgba(0,0,0,.4);
	z-index: 2;
}
#video {
	width:720px;
	height:480px;
	z-index:1;
	overflow: hidden;
}
.textOver, .text, .pauseWrap, .logoWrap {
	position: absolute;
	width:100%;
	font-family:"ubuntureg", sans-serif;
    color: #fff;
	text-align:left;
	z-index:10;
}
.textOver {
	top:3%;
}
.text {
	width:26em;
	left:50%;
	margin-left: -9em;
	bottom:3%;
	backdrop-filter:blur(2px);
	font-size:125%;
	font-family:"ubuntumedium", sans-serif;
	text-align:center;
	color:#fff;
	z-index:8;
	padding-left: 10px;
	padding-right: 10px;
}
	
.textOver h1, .content .textOver p, #pause {
	max-width:1250px;
	margin:0 auto;
	padding:.2em;
    color: #fff;
	text-align:center;
}
.textOver h1 {
	font-size:250%; 
}
.textOver p, .text p {
	padding-left: 10px;
	padding-right: 10px;
	font-size:100%;
	text-shadow: 1px 1px 1px #000;
}
.text p {
	padding-left: 10px;
	padding-right: 10px;
	color:#fff;
}

/************* textslider***********/
#slider {
	position:relative;
}
.carousel {
	position: relative;
	width:100%;
	margin:0 auto;
	z-index:15;
}
.content .carousel p {
	font-size:110%;
	color:#279ddc;
}
.slide {
	width:100%;
	height:auto;
	float:left;
	text-align: center;
	position: relative;
	}
	.btn-bar {
		position:relative;
		width:100%;
	}
	 #buttons {
		padding:0 0 5px 0;
		margin:1em auto;
		text-align:center;
		}
		
		#buttons a {
		display:inline;
		margin:0 2em;
		text-decoration:none;
		padding:0;
		width:35px;
		text-shadow:1px 1px #000;
		font-size:125%;
		}
		
		a#prev:hover, a#next:hover {
		color:#e41521;
		}
		
.logoWrap {
	top:auto;
	bottom:4%;
	background: url(https://www.genniges-fahrraeder.at/medien/genniges-fahrraeder-1050-wien-fahrrad-fahrrad1050-fahrradwerkstatt-fahrradservice-best-bikeshop-vienna-fahrradgeschaeft-fahrradladen-rad-mit-still.svg) no-repeat center;
	width:600px;
	height:490px;
	right:50%;
	margin-right:-304px;
}
.pauseWrap {
	top:auto;
	width:auto;
	bottom:4%;
	text-align:right;
	right: 2em;
}
#pause {
	font-size:90%;
    padding: .2em;
    border: none;
	background:none;
    cursor: pointer;
	z-index:10;
}
	.video:after, #text:after, #contentWrap:after, .carousel:after {
		content: ".";
		display: block;
		line-height: 0;
		font-size: 0;
		height:0;
		clear: both;
		overflow: hidden;
	}
	img.resp {
		position:relative;
		width:100%;
		max-width:1350px;
		height:auto;
		margin-bottom:-6px; /* preventing border of containing div to extend the height, resulting in a bottom gap*/
	}
img {
	/*border:#000 1px solid;*/
}
img.bildNeben {
	 width:72%;
	 height:auto;
	 float:right;
}
.flexbox img {
	border:none;
}
	#angebote .content.flexbox img {
		width:100%;
	}
.contentWrap {
	position:relative;
	width:100%;
	max-width:1350px;
	margin:0 auto;
	background-color: none;
}
img.grossesBild {
	width:100%;
	height:auto;
	margin:.2em 0 .1em 0;
	/*max-width:980px;*/
}
	.flexbox img.grossesBild {
    margin-bottom: 1%;
    padding-top: 1%;
	}
section {
	background-color:#fff;
	margin-top:1em;
	border-top:1px #004225 solid;;
}
.textWrap {
	margin:0 8% 0 231px;
	padding:1px 0;
}
section#kontakt h1 {
	margin-bottom:30px;
}
section#kontakt .content#impressum { /*wie flexbox>div*/
	 padding-left:.6em;
	 margin-left:1em;
}
table#slidetoggle {
	 padding-left:3.5em; /*wie p, aber andere font size*/
}
/*section:nth-child(2n-1) {
	background:#279ddc;
	color:#fff;
    font-size:120%;
}
section:nth-child(2n) .content p, section:nth-child(2n) h2 {
	color:#fff;
font-size:120%;
    padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-top: 10px;

}
section:first-of-type, section:last-of-type, section:nth-child(-n+2) {
	background-color:transparent;
}
section:nth-child(2){
	background-color:#279ddc;*/ /*blau*/
section#ein-angebot {
	background-color:#fff;
}
section#ein-angebot h1 {
	padding-left:15px;
}
section h1 {
	padding:.7em 15px .2em 0;
}
.umbruch {
	display:none;
}
#logo2 {
	padding:2% 0 0 2%;
}
.content h2 {
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
section:last-of-type .content p {
	color:#fff;
	font-size:80%;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: -3%;
}
section:last-of-type a, section:last-of-type a.link  {
	color:#cc492b/*004225*/;
}
section:last-of-type a:hover,section:last-of-type a.aktiv  {
	color:#fff;
}
section ul, section ol, section li {
	padding-left: 10px;
	padding-right: 10px;
	list-style:outside circle;
	margin-left:2em;
}
section ul, section ol {
	margin-top:-.5em;
	margin-bottom:1em;
}
section li p {
	padding:.1em 0 !important;
	margin:.3em;
	font-size:120%;
}

.flexbox {
	display:flex;
	flex-flow:row wrap;
	justify-content: center;
	gap:1em;
	width:100%;
	margin-bottom: 1%;
	padding-top: 1%;
}
.flexbox > div {
	width:30%;
	min-width:25em;
	border: #000 1px solid;
	margin-bottom: 1%;
	padding-top: 1%;
	padding:.6em;
	/*padding-bottom:0;*/
}
#kontakt .flexbox > div {
	width:40em;
}
	#oeff {
		float:right;
		position:relative;
		margin-top:-11.6em;
		margin-bottom: 1%;
		padding-top: 1%;
	}
/*#angebote .flexbox > div {
	background:#fff;
}*/
.flexbox img {
	margin:0 auto;
	display:block;
}
.flexbox h2 {
	font-family:"mardec";
	text-align:center;
	margin-bottom: 1%;
	padding-top: 1%;
	padding:0.3em 0 0 0;
	line-height:.9em;
}
#angebote .flexbox h2 {
	padding-bottom:.3em;
}

/**** vorläufige styles - coming soon ************/
.vorl {
	position:relative;
	width:482px;
	height:411px;
	margin-top:20px;
	margin-bottom:-250px;
}
#vorlaeufig #overlay {
	background-color:transparent;
	height:344px;
}
#vorlaeufig #overlay img {
	width:100%;
	margin-top:-50px;
}
#vorlaeufig #impr, #daten #impr {
	width:500px;
	margin:20px auto;
}
#vorlaeufig #impr {
	color:#999;
}
#vorlaeufig a, a.link {
	color:#cb5637;
}
#vorlaeufig a:hover {
		color:#cc3c03;
}
#vorlaeufig #impr a, a.link {
	color:#a5786d /*#ac3b1f*/;
	font-weight:normal;
	}
#vorlaeufig #impr a:hover {
		color:#cb3c19;
}
	
/**************div Resolutions ************/


/*layouts larger than 1340px*/
@media screen and (min-width: 1340px) { /** Vorschlaege: 1224, 1824 */
	/*body {
		font-size: 120%;
	}*/
}

@media screen and (max-width:1230px) {
	#headnav li a {
		font-size:108%;
	}
}
@media screen and (max-width:1100px) {
	body {
		font-size:86%;
	}
	#vorlaeufig #overlay img {
		margin-top:10px;
	}
	#logo {
		width:125px;
		height:108px;
		padding:0;
		background: url(/medien/genniges-fahrraeder-1050-wien-fahrrad-fahrrad1050-fahrradwerkstatt-fahrradservice-best-bikeshop-vienna-fahrradgeschaeft-fahrradladen-rad-mit-still.svg) no-repeat 5px;
		z-index:8;
	}
	section#kontakt h1 {
		margin-bottom:0;
	}
	.adrFloat {
		top:100px;
		width:120px;
		padding:0 0 0 5px;
		font-size:80%;
	}
	#headnav, #headnav ul, #headnav li {
		height:55px;
	}
	#headnav li a {
		font-size:125%;
		padding:16px .2em 10px;
	}
	#bodyWrap {
		margin-top:55px;
	}
	.textOver h1 {
	}
	section h1 {
		padding-top:5px;
	}
	.textWrap {
		margin: 0 4% 0 100px;
	}
	/*.logoWrap {
		background:url(../medien/asr-logo-v03-weiss-rot-kontur-479x141.png);
		width:479px;
		height:141px;
		margin-right:-235px;
	}*/
}
/* Smartphones  */
@media screen and (max-width:840px) {
	body {
	}
	#vorlaeufig #overlay img {
		margin-top:75px;
	}
	#logo {
		width:130px;
		height:108px;
		background:url(/medien/genniges-fahrraeder-1050-wien-fahrrad-fahrrad1050-fahrradwerkstatt-fahrradservice-best-bikeshop-vienna-fahrradgeschaeft-fahrradladen-rad-mit-still.svg) no-repeat;
		float:left;
		left:5px;
		top:4px;
	}
	#headnav, #headnav ul, #headnav li {
		float:none;
	}
	#headnav ul {
		position:relative;
		width:auto;
		display:none;
		height:auto;
	}
	#headnav li {
		display:block;
		height:auto;
		background:#004225;
		text-align:center;
		border-bottom:#121b46 1px solid;
		white-space:normal;
	}
	#headnav li:first-of-type {
		border-top:#121b46 1px solid;
	}
	#headnav li a {
		padding:20px 0;
		display:block;
		font-size:2rem;
		white-space:normal;
	}
	/*Display 'show menu' link*/
	#show-menu {
		display:block;
		position:relative;
		height:44px;
		font-size:180%;
		font-family:"mardec";
		padding-top:10px;
		padding-right:5px;
		text-align:right;
		text-shadow:
			-1px -1px 0 #000,
			1px -1px 0 #000,
			-1px 1px 0 #000,
			1px 1px 0 #000;
	}
	#show-menu:after {
		font-family: 'icomoon';
		content: "\e9bf";
		font-size:90%;
	}
	#show-menu.shown:after { /* jquery toggle() */
		content:"\e9c0";
	}
		
	/*Pointer on Hover, so that the user knows of an active link*/
	#show-menu:hover {
		cursor:pointer;
	}
	#bodyWrap {
		margin-top:46px;
	}
	.text {
		padding-left: 10px;
	    padding-right: 10px;
		width:100%;
		left:0;
		margin-left: 0;
		bottom:3%;
		backdrop-filter:blur(2px);
		font-size: clamp(2.5vw);
		font-family:"ubuntumedium", sans-serif;
		text-align:center;
		color:#fff;
		z-index:8;
	}
	.textOver {
		position:relative;
	}
	.textOver h1 {
		font-size:200%;
	}
	.content .carousel p {
		color:#fff;
		font-size:100%;
		margin-top:.5em;
	}
	 #buttons {
		margin:0;
		}
	.logoWrap {
		background:url(/medien/genniges-fahrraeder-1050-wien-fahrrad-fahrrad1050-fahrradwerkstatt-fahrradservice-best-bikeshop-vienna-fahrradgeschaeft-fahrradladen-rad-mit-still.svg);
		width:320px;
		height:94px; Favicon
		margin-right:-150px;
	}
	.pauseWrap {
		bottom:4%;
		right: .4em;
	}
	#pause {
		font-size:80%;
	}
	section ul, section ol, section li {
		list-style:outside circle;
		margin-left:.5em;
	}
	section ul, section ol {
		margin-bottom:.6em;
	}
	/*.flexbox > * {
		width:100%;
	}*/
	.flexbox > div, #kontakt .flexbox > div {
		width:98.5%;
		min-width:0;
		border: #000 1px solid;
		margin-bottom: 1%;
		padding:.3em;
		/*padding-bottom:0;*/
	}
		#oeff {
			 float:none;
			display:block;
			margin-top:0;
		}
	img.bildNeben {
		 width:100%;
		 float:none;
	}
	table#slidetoggle {
		 padding-left:0;
		font-size: 100%;
		}
		td.abstand {
			width:0;
		}
	.textWrap {
		margin: 0 1% 0 1%;
	}
	section h1 {
		padding:.5em .5em .2em 0;
		text-align: right !important;
	}
	.umbruch {
		display:inline-block;
	}
	p, .text p {
		font-size:clamp(1rem, 3vw, 2rem);
		line-height: 1.3em;
	}
	.content p, .content h2 {
		font-size:100%;
		padding-left: 10px;
	    padding-right: 10px;
	    padding-bottom: 10px;
	}
	.adrFloat {
		display:none;
	}
	#tel {
		display:block;
		position:absolute;
		left:130px;
		top:0.3em;
		font-size:125%;
	}
	.icon-phone:before {
		font-family: 'icomoon';
		content: "\e900";
		font-size:90%;
	}
	.em1_4 {
		margin-top:.5em;
	}

@media screen and (max-width: 500px)  {/*1-manche mobile browser wollen noch ein handheld stylesheet 2-Geraete wie Droid 3-iphones 4 und letzte - nur zur Darstellung auf desktop zu Testzwecken*/
	#vorlaeufig #overlay {
		width:auto;
	}
	img.vorl {
		width:321px;
		height:274px;
		margin-top:2px;
	}
	img#karte {
		width:280px;
		height:280px;
	}
	#vorlaeufig #impr {
		width:400px;
		margin:2px auto;
	}
	td.abstand {
		width:2px;
	}
	.schriftbereich h1 img {
		width:200px;
	}


/*layouts iPhone4*/
@media="only screen and (-webkit-min-device-pixel-ratio: 2) {
	
}

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
}

/*iPad styles*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
	body {
		font-size:105%;
	}
}
/** ipad retina ****/
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) { 

}