@charset "utf-8";
/* CSS Document */
/* AnkaTrans */
/* Copyright 2018 Hoppe Websolutions */
/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('../fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
       url('../fonts/roboto-condensed-v16-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
       url('../fonts/roboto-condensed-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('../fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}
.clearfix { zoom:1; }
.clearfix:before, .clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	overflow:hidden;
}
.clearfix:after { clear:both; }

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;	
}

html {
	height: 100%;
	font-size: 90%;
	overflow-y: scroll !important;
}
body {
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 1.6;
	color: #333;
	font-weight: 300;
}
.container {
	padding: 0 0.5em;
}
#english h2 {
	background: url(../img/flag-uk.png) left top no-repeat;
	background-size: 60px auto;
	padding: 0.75em 0.5em 0.75em 3em;
}
#france h2 {
	background: url(../img/flag-france.png) left top no-repeat;
	background-size: 60px auto;
	padding: 0.75em 0.5em 0.75em 3em;
}
#svenska h2 {
	background: url(../img/flag-sweden.png) left top no-repeat;
	background-size: 60px auto;
	padding: 0.75em 0.5em 0.75em 3em;
}
#russia h2 {
	background: url(../img/flag-russia.png) left top no-repeat;
	background-size: 60px auto;
	padding: 0.75em 0.5em 0.75em 3em;
}
/*.language p {
	padding-left: 0.5em;
	padding-right: 0.5em;
}*/
p, ul, ol, dl, h1, h2, h3, h4 {
	margin: 0;
	padding: 1em 0 0 0;
}
p, ul, ol, dl {
	font-size: 1.15rem;
	color: #333;
}
ul, ol {
	margin-left: 1em;
	padding-left: 1em;
}
ul {
	list-style-type: square;
}
ul.vita {
	padding-top: 0.25em;
}
p.hinweis {
	font-size: 100%;
	line-height: 1.4;
}
h1, h2, h3, h4 {	
	font-weight: 300;
	color: #8f001e;
	padding-top: 0.5em;
}
h1 {
	font-size: 1.15em;
	line-height: 1.3;
	color: #333;
	font-style: italic;
	font-weight: 300;
}
h2 {
	font-size: 1.75em;
	line-height: 1.2;
	font-weight: 400;
}
h3 {
	font-size: 1.5em;
	line-height: 1.2;
	padding-top: 1em;
	font-weight: 400;
}

h4, p.slogan {
	font-size: 1.15em;
	line-height: 1.3;
	padding-top: 1em;
	font-weight: 400;
	font-style: italic;
}

/* Links */
a:link {
	color: #333;
	text-decoration: underline;
}
a:visited {
	color: #333;
	text-decoration: underline;
}  
a:hover, a:focus {
	color: #333;
	text-decoration: none;
}  
a:active {
	color: #333;
	text-decoration: underline;
}
h3 a:link {
	color: #8f001e;
	text-decoration: underline;
}
h3 a:visited {
	color: #8f001e;
	text-decoration: underline;
}
h3 a:hover, h3 a:focus {
	color: #8f001e;
	text-decoration: none;
}  
h3 a:active {
	color: #8f001e;
	text-decoration: underline;
}

#head {
	position: fixed;
	position: relative;
}
#slogan {
	display: none;
}
#navi {
	position: relative;
	width: 100%;
	z-index: 901;
}
#logo-s {
	position: absolute;
	float: left;
	margin: 0;
	padding: 5px 0 0 1rem;
	z-index: 905;
}
#logo-s img {
	width: 200px;
	height: auto;
}
#logo {
	display: none;
}
.bgd-startfoto {						
	background: #f0f0f0 url(../img/luebeck-bruecke-s.jpg) center bottom no-repeat;
	background-size: cover;
	height: 0;
	padding-top: 34%;
	position: relative;
	margin-bottom: -1em;
}

#maincontent {
	padding: 0;
	margin: 0;
}
section {
	padding: 1rem 1rem 0 1rem;
}
#foot {
	width: 100%;
	background-color: #8f001e;
	padding: 2.5em 0 2.5em 0;
	padding: 1.75em 1rem 2.5em 1rem;
	margin-top: 2em;
	 z-index: 200;
	 position: relative;
}
#foot p {
	color: #FFF;
	text-align: center;
	font-size: 1em;
}
/* Links im Footer */
#foot a:link {
	color: #FFF;
	text-decoration: underline;
}
#foot a:visited {
	color: #FFF;
	text-decoration: underline;
}  
#foot a:hover, #foot a:focus {
	color: #FFF;
	text-decoration: none;
}  
#foot a:active {
	color: #FFF;
	text-decoration: underline;
} 

/* Mobile Links Phone and Mail */
span.phone a, span.phone1 a, span.mail a,span.mail1 a, span.mobile a, span.fax, span.route a {
	display: block;
	padding: 0.75em 0;
	padding: 0.75rem 0;
	color: #FFF;
	font-size: 1.1em;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	padding-left: 2.25em;
	padding-left: 2.25rem;
	padding-right: 1.5em;
	padding-right: 1.5rem;
	margin: 0;
	background: #8f001e url(../img/phone.png) 0.5em 50% no-repeat;
	background-size: 25px;
	max-width: 350px;
}
span.mail a, span.mail1 a {
	background: #8f001e url(../img/mail.png) 0.5em 50% no-repeat;	
	background-size: 25px;
	margin-top: -0.75em;
}
span.mail1 a {
	margin-top: 0;
}
span.mobile a {
	background: #8f001e url(../img/mobile.png) 0.5em 50% no-repeat;	
	background-size: 30px;
}
span.route a {
	background: #8f001e url(../img/route.png) 0.5em 50% no-repeat;	
	background-size: 25px;
}
span.fax {
	background: #8f001e url(../img/fax.png) 0.5em 50% no-repeat;	
	background-size: 25px;
}
span.phone a:hover, span.mail a:hover, span.phone1 a:hover, span.mail1 a:hover, span.route a:hover, span.fax:hover, span.mobile a:hover {
	background-color: #333;
}


.not-mobile, span.not-mobile, br.not-mobile, div.not-mobile {
	display: none;
}

.infobox {
	margin-top: -1em;
}
.infobox figure {
	margin-top: 1em;
}
.infobox figure img {
	width: 100%;
	max-width: 350px;
	height: auto;
}
.infobox figcaption {
	font-size: 1.1em;
	color: #333;
	font-style: italic;
	text-align: center;
}
.infobox figure.flags {
	-webkit-backface-visibility: hidden;
}
.infobox figure.flags img {
	float: left;
	width: 25%;
	max-width: 90px;
	padding: 0;
	margin: 0;
	height: auto;
	transition-duration: 0.5s;
	transition-property: transform;
}
.infobox figure.flags img:hover {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);	
	transform: rotate(360deg);	
	transition-duration: 1.25s;
	transition-property: transform;	
}
/* Google Maps */
#map_canvas {
	padding: 0;
	margin: 1.5em 0;
	height: 15em;
}
/* Styles Angebot -> Vorteil */
.angebot {
	margin: 0 0 0.5em 0;
	padding: 1em 0.25em 3em 0.25em;
	background: url(../img/arrow-down.png) center bottom no-repeat;
	background-size: 2.5em;
	color: #8f001e;
	font-weight: 400;
	text-align: center;
}
.vorteil {
	margin: 0;
	padding: 0em 0.25em 1em 0.25em;
	font-weight: 400;
	text-align: center;
}
.mark {
	background: #eaeaea;	
}
.first {
	margin-top: 1.5em;
}
@media only screen and (min-width: 340px) {
	.infobox figcaption {
		text-align: left;
	}	
}
@media only screen and (min-width: 600px) {
	/* Styles Angebot -> Vorteil */
	.angebot {
		margin: 1em 0 0 0;
		padding: 0em 3em 1em 0.5em;
		background: url(../img/arrow-right.png) right 40% no-repeat;
		background-size: 2.5em;
		color: #8f001e;
		font-weight: 400;
		float: left;
		width: 52.5%;
		text-align: left;
	}
	.vorteil {
		margin: 1em 0 0 0;
		padding: 0em 0.5em 1em 1em;
		font-weight: 400;
		float: right;
		width: 47.5%;
		text-align: left;
	}
}
@media only screen and (min-width: 961px) {
	
	html {
		font-size: 85%;
		background-color: #f8f8f8;
	}
	span.not-mobile, br.not-mobile {
		display: inline-block;
	}	
	div.not-mobile, p.not-mobile {
		display: block;
	}
	.only-mobile {
		display: none;
	}
	.p7PM3-03 {
		font-size: 80% !important;
	}
	
	#head {
		position: relative;
		width: 100%;
		margin: 0 auto;
	}	
	.wrapper {
		width: 100%;
		margin: 0 auto;
		max-width: 1960px;
	}
	
	.bgd-startfoto {						
		background: #f0f0f0 url(../img/luebeck-bruecke.jpg) center bottom no-repeat;
		background-size: cover;
		height: 0;
		padding-top: 23%;
		padding-top: 30.5%;
		padding-top: 29%;
		position: relative;
		margin-bottom: 0;
	}
	#logo-s { 
		display: none;
	}
	#logo {
		display: block;
		width: 25%;
		margin: 0 auto;
		margin-top: -11.9%;
		width: 20%;
		margin-top: -10.25%;
	}
	#logo img {
		width: 100%;
		max-width: none;
		height: auto;
	}
	#slogan {
		display: block;
		margin: 0 auto;
		margin-top: -1.85%;
		margin-top: -3.4%;
		/*margin-top: -3.2%;*/
		text-align: center;
	}
	.not_german #slogan {
		margin-top: -2.8%;
	}
	#slogan p {
		font-size: 2em;
		color: #8f001e;
		font-weight: 300;
		line-height: 1.2;
	}
	.not_german #slogan p {
		line-height: 1;
	}
	#slogan p span {
		font-size: 0.75em;
	}
	
	.content-wrapper, .footer-wrapper {
		width: 92%;
		width: 100%;
		margin: 0 auto;
		max-width: 1200px;
		padding: 0 20px;
		padding: 0 2rem;
		padding-top: 0em;
	}	
	.content-wrapper {
		-webkit-transition: padding 0.5s ease-in-out;
		-moz-transition: padding 0.5s ease-in-out;
		-ms-transition: padding 0.5s ease-in-out;
		-o-transition: padding 0.5s ease-in-out;
		transition: padding 0.5s ease-in-out;			
	}	
	section {
		padding: 1em 2em;
		padding: 1rem 1.25rem;
	}

	#navi {
		position: fixed;
		top: 0;
		background-color: transparent;
		height: 0;
		-webkit-transition: height 0.5s ease-in-out;
		-moz-transition: height 0.5s ease-in-out;
		-ms-transition: height 0.5s ease-in-out;
		-o-transition: height 0.5s ease-in-out;
		transition: height 0.5s ease-in-out;			
	}
	#navi.smaller {
		height: 50em;
	}	  

	.weiss {
		background: #e8e8e8;
		background-color: transparent;
		color: #333;
		box-shadow: 0px 0px 1em rgba(0,0,0,0.25);
	}

	/* Mail- und Phone--Buttons */
	/** Link-Styles für mobile Buttons wieder aufheben **/
	span.phone1 a, span.mail1 a, span.mobile a, span.route a, span.fax {
		display: inline-block;
		background-image: none;
		background-color: transparent;
		padding: 0;
		text-align: left;
		color: #333;
		font-weight: 300;
		font-size: 1em;
	}	
	span.mail1 a, span.route a {
		text-decoration: underline;
	}	
	span.mail1 a:hover, span.route a:hover {
		text-decoration: none;
	}	
	span.phone1 a:hover, span.mail1 a:hover, span.mobile a:hover, span.route a:hover, span.fax:hover {
		background-color: transparent;
	}  
	span.phone1 a:hover, span.mobile a:hover, span.fax:hover {
		cursor: text;
	} 	
	p.nomargin {
		margin-top: -1em;
	}	  
	
	
	span.phone a, span.mail a {
		background-size: 28px;
		font-size: 110%;
		font-weight: 400;
		text-decoration: none !important;
	}
  
	span.phone a:hover {
		cursor: text;
	}   
	span.phone a:hover, span.mail a:hover {
		background-color: transparent;
		background-color: #333;
	}
	
	#foot {
		padding-top: 0.5em;
		padding-left: 0;
		padding-right: 0;
	}  
	#map_canvas {
		display: block;
		padding: 0;
		height: 20em;  
		margin: 0.5em 0 1em 0;
		border: 0.5em solid #FFF;
	} 
}
/*@media only screen and (min-width: 840px) {
	
	html {
		font-size: 90%;
		background-color: #f8f8f8;
	}	
	.p7PM3-03 {
		font-size: 90% !important;
	}
}*/
/** Ab hier Navigation rechts ausgerichtet und 2-spaltiger Content **/
@media only screen and (min-width: 1024px) {
	html {
		font-size: 90%;
	}	
	
	.p7PM3-03 {
		font-size: 100% !important;
	}	
	#logo.smaller {
		margin-left: 1.25rem;
	}	
	.content-wrapper, .footer-wrapper {
		width: 92%;
	}
	#maincontent {
		float: left;
		width: 70%;
	}
	#sidebar {
		float: right;
		width: 30%;
	}	
    #maincontent section {
		padding-right: 4rem;
	}
	/* Anpassungen Navigation */
	.p7PM3-09 ul {
		padding: 0px !important;
	}
	.p7PM3-09 ul li a {
		padding: 12px 10px !important;
	}
	.infobox {
		margin-top: 2em;
		padding-top: 0;
		color: #333;
		box-shadow: 0px 0px 1em rgba(0,0,0,0.25);		
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-moz-border-radius-bottomright: 15px;
		-moz-border-radius-bottomleft: 15px;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;	  
	}
	.infobox h3 {
		font-size: 1.5em;
		font-weight: 400;
		padding-top: 0.25em;
	}
	.infobox p {
		font-size: 1.05em;
		line-height: 1.4;
	}  
	.infobox p, .infobox h3 {
		color: #333;
	}
	.infobox h3 {
		color: #333;
		border-top: 0.6em solid #8f001e;
		padding-top: 0.5em;
		padding-bottom: 0;
	}
  
	.infobox figure {
		text-align: center;
	}
	.infobox figure img {
		text-align: center;
		height: auto;
	}
	.infobox figcaption {
		color: #333;
		font-size: 1.00em;
	}
	.infobox figure.flags img {
		border: none;
	}  	
	/* Links innerhalb der Infoboxen */
	.infobox a:link {
		color: #FFF;
		text-decoration: underline;
	}
	.infobox a:visited {
		color: #FFF;
		text-decoration: underline;
	}  
	.infobox a:hover, .infobox a:focus {
		color: #FFF;
		text-decoration: none;
	}  
	.infobox a:active {
		color: #FFF;
		text-decoration: underline;
	}  	
	#foot p {
		text-align: left;
		padding-left: 1.25rem;
	} 	
}
@media only screen and (min-width: 1100px) {
	#english h2, #france h2, #svenska h2, #russia h2 {
		font-size: 2em;
		background-size: 90px auto;
		padding: 1.0em 0.5em 1em 3.5em;
	}
	.language p {
		font-size: 1.25em;
	}
}

@media only screen and (min-width: 1280px) {
	html {
		font-size: 95%;
	}	
	#logo.smaller {
		margin-left: 1.25rem;
	}	
	#foot p {
		padding-left: 1.25rem;
	}		
	/* Anpassungen Navigation */
	.p7PM3-09 ul li a {
		padding: 12px 15px !important;
	}
}
@media only screen and (min-width: 1600px) {
	html {
		font-size: 100%;
	}	
}
@media only print {
	#p7PM3_1, #foot, .flags, .bgd-startfoto {
		display: none;
	}
	#logo-s {
		position: relative;
	}
}