/* ##################  RESPONSIVE ################# */
/* #Desktop >=1200
================================================== */
@media only screen and  (max-width: 1250px) {
	.center-content{
		width:980px;
	}
	.logo-harufa {
		width: 210px;
		top: 60px;
		left: 20px;
	}
	.navi-main .navi-elem a {
		font-size: 14px;
	}
	.box_fahrkarten-reservieren {
		background: url(../bilder-layout/rotes-dreieck-compressor.png) no-repeat;
		background-size: 536px 155px;
		width: 506px;
		height: 110px;
		top: 451px;
		left: 20px;
		padding-top: 10px;
		padding-left: 10px;
		min-height: 160px;
	}
	.fahrkarten-reservieren {
		padding-left: 20px;
		font-size: 15px;
		line-height: 120%;
		padding-top: 0px;
	}
	.box_fahrkarten-reservieren .hinweisbox{
		font-size: 15px;
		line-height: 130%;
	}
	.box_fahrkarten-reservieren .hinweisbox img{
		width: 30px;
	}
	.box_fahrkarten-reservieren .hinweisbox .ce-gallery{
		margin-bottom: 0;
	}
	.icon-fahrkarten {
		width: 47px;
	}
	.telefon-reservierung {
		padding-top: 15px;
		font-size: 23px;
	}
	.stoerer-fahrtdauer .icon-fahrtdauer {
		width: 40px;
	}
	.stoerer-fahrtdauer {
		top: 500px;
		border: 12px solid rgba(255,255,255,0.2);
		font-size: 18px;
		font-weight: 600;
		line-height: 120%;
	}
	.stoerer-fahrtdauer > div > div {
		width: 145px;
		height: 120px;
		padding-top: 25px;
	}
	footer .container-inhalt-fuss{
		padding:0 40px;
	}
	footer .contact-us{
		padding-left:40px;		
	}
	footer hr {
		margin: 30px 0px;
	}
	.container-inhalt {
		width: calc(100% - 40px);
	}
	.container-inhalt img{
		max-width:400px;
		height:auto;
	}
	.frame-type-image .ce-row{
		width:calc(25% - 15px);
	}
	.frame-type-image .ce-row img{
		width:100%;
		height:auto;
	}
	.container-kopf .navi-main .navi-elem a {
		padding: 15px 7px;
		font-size: 13px;
	}
	.vorschaltseite .frame-type-image .ce-row{
		width: 100%;
	}
	.vorschaltseite .inhalt .einstiegstext{
		padding-top: 0px;
	}
	.stoerer-hinweis .frame-type-image .ce-row{
		width: unset;
	}
	.stoerer-hinweis .frame-type-image .ce-row img{
		width: 150px;
	}
}
/* #Desktop
================================================== */
@media only screen and  (max-width: 1023px) {
	.center-content,
	.container-inhalt,
	.startseite .container-inhalt{
		width:100%;
	}
	.container-inhalt .inhalt{
		width:92%;
		padding:0 4%;
	}
	.band-rechts,
	.container-kopf .navi-main,
	.container-kopf .lang-switch,
	footer .navi-meta{
		display:none;
	}
	#btnMobileMenu {
		display:block;
	}
	.startseite .kopfbild{
		background: #e3021c;
	}
	.box_fahrkarten-reservieren{
		background:none;
		top: auto;
		bottom: 0;
		left: 0;
		height: 105px;
		padding-top: 0px;
		width:auto;
	}
	.box_fahrkarten-reservieren .hinweisbox{

	}
	.stoerer-fahrtdauer{
		top:370px;
		right:50px;
	}
	footer{
		font-size:14px;
	}
	.container-inhalt img {
		max-width: 300px;
	}
	.container-inhalt{
		margin-top:0;
	}
	.startseite .container-inhalt {
		margin-top: 80px;
	}
	.fischereihafen-rundfahrt.startseite .box_fahrkarten-reservieren{
		display: none;
	}
	.fischereihafen-rundfahrt.startseite .kopfbild{
		background-color: #012981;
	}
	.stoerer-hinweis{
		bottom: 20%;
		left: 15%;
	}
}

/* #Mobile large (Landscape) ab iPhone 6+
================================================== */
@media only screen and (max-width: 767px){
	.stoerer-fahrtdauer {
		top: 300px;
	}	
	.box_fahrkarten-reservieren {
		height: 90px;
		padding-top: 0;
		padding-left: 20px;
		left:0;
		bottom: -10px;
		min-height: 130px;
	}
	.box_fahrkarten-reservieren .hinweisbox{
		line-height: 130%;
	}
	.stoerer-fahrtdauer > div > div {
		width: 115px;
		height: 90px;
	}
	.stoerer-fahrtdauer .icon-fahrtdauer {
		width: 30px;
	}
	.stoerer-fahrtdauer {
		font-size: 14px;
		top: 280px;
	}
	footer .container-inhalt-fuss .links,
	footer .container-inhalt-fuss .rechts {
		width: 100%;
		float: none;
		padding-bottom: 0px;
	}
	footer .container-inhalt-fuss {
		width: 92%;
		padding:0 4% 50px 4%;
	}
	footer .contact-us{
		padding-left:4%;
	}
	.frame-type-textpic .ce-intext.ce-right .ce-gallery,
	.frame-type-textpic .ce-bodytext{
		margin-left:0;
	}
	.container-inhalt img {
		max-width: 100%;
	}
	.frame-type-image .ce-row{
		display:block;
		width:100%;
	}
	.frame-type-image .ce-gallery{
		float:none;
	}
	.ticket-link-box{
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}
	.stoerer-hinweis{
		bottom: 15%;
		left: 10%;
	}
	.stoerer-hinweis .frame-type-image .ce-row img{
		width: 120px;
	}
}
/* #Mobile large (Landscape) ab iPhone 6
================================================== */
@media only screen and (max-width: 710px) and (min-width: 668px){

}
@media only screen and (max-width: 667px) {
	.logo-harufa {
		width: 150px;
		top: 20px;
		left: 20px;
	}
	#btnMobileMenu {
		top: 10px;
		padding: 15px;
	}
	.startseite .kopfbild {
		padding-bottom: 30px;
	}
	.telefon-reservierung {
		padding-top: 5px;
		font-size: 20px;
	}
	.box_fahrkarten-reservieren {
		height: 80px;
	}
	.icon-fahrkarten {
		width: 40px;
	}
	.fahrkarten-reservieren {
		padding-left: 20px;
		font-size: 13px;
	}
	.telefon-reservierung {
		padding-top: 5px;
		font-size: 18px;
	}
	.stoerer-fahrtdauer {
		top: 200px;
		right:20px;
	}
	.vorschaltseite .inhalt .flex-container{
		flex-direction: column;
		gap: 100px;
	}
	.vorschaltseite .inhalt .flex-container > div{

	}
}
/*  #Mobile (z.B. iphone 4 quer)
================================================== */
@media only screen and (max-width: 480px) {
	.stoerer-fahrtdauer > div > div {
		width: 85px;
		height: 70px;
		padding-top:15px;
	}
	.stoerer-fahrtdauer .icon-fahrtdauer {
		width: 20px;
	}
	.stoerer-fahrtdauer {
		font-size: 12px;
		top: 150px;
		right:20px;
		border: 8px solid rgba(255,255,255,0.2);
	}
	.box_fahrkarten-reservieren {
		height: 70px;
	}
	.tx-powermail .powermail_fieldwrap_name,
	.tx-powermail .powermail_fieldwrap_e_mailadresse{
		width:100%;
		float:none;
		margin-left:0;
		margin-right:0;
	}
	.box_fahrkarten-reservieren{
		bottom: 0;
		padding-left: 10px;
		min-height: 115px;
	}
	.box_fahrkarten-reservieren .hinweisbox{
		font-size: 14px;
	}
	.box_fahrkarten-reservieren .hinweisbox img{
		width: 25px;
	}
	.box_fahrkarten-reservieren .hinweisbox .ce-bodytext{
		padding-left: 0;
	}
	.stoerer-hinweis{
		bottom: 10%;
		left: 5%;
	}
	.stoerer-hinweis .frame-type-image .ce-row img{
		width: 100px;
	}

}
/*  #Mobile (Portrait)
================================================== */
@media only screen and (max-width: 420px) {

}
@media only screen and (max-width: 350px) {

}

/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 481px) and (max-width: 666px) {


}
/* Retina Grafiken*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) {

}