@charset "UTF-8";
/*
*
*	Lechuza - Mobile View
*	Author: SECONDRED Newmedia GmbH
*	Web: http://www.secondred.de
*
*/
/* -- Desktop HD  -- */
@media screen and (max-width: 1366px){
	#teaser { height:450px;}	
	.block .img  { overflow:hidden}
	.block:not(.block-card) .img img { width:130% !important; height:auto !important; margin-left:-15% }
    
	.block-offer.inbox .img img {width: auto !important;height: auto !important; margin-left: 0}
	
    #teaser .teaser-infobox { margin-top: -50px}
    #teaser .teaser-infobox .text{ padding: 20px}
    #teaser .teaser-infobox .text em { font-size:12px; }
    #teaser .teaser-infobox .text strong { font-size: 28px; line-height: 35px;}
    #teaser .teaser-infobox .text small { font-size: 11px;}

}
/* -- Desktop HD  -- */
@media screen and (max-width: 1280px){	
	.block-card { margin-bottom:20px}
	/* .block-card .inner { width:65%} */
	/* .content-part .rt img { margin-left:-20%} */
	
	.kontakt.modalContent { height:auto}
	.kontakt.modalContent .row .lft  img { width:100% !important; height:auto !important}
	
	.kontakt.modalContent .row .lft { width:40%} 
	.kontakt.modalContent .row .rt {  width:60%}
    
    /*
    #teaser .teaser-infobox {}
    #teaser .teaser-infobox .text{}
    #teaser .teaser-infobox .text em { font-size:13px; }
    #teaser .teaser-infobox .text strong { font-size: 30px; line-height: 35px;}
    #teaser .teaser-infobox .text small { font-size: 12px;} */
}
@media screen and (min-width: 961px) and (max-width: 1280px){	
    .block-card h3 {font-size: 2.6vw; line-height: 2.9vw; margin-bottom: 0.7vw}
    .block-card a.more {font-size:1.1vw}
    .block-card .inner > strong {font-size:1.1vw}
}
/* -- Tablet Landscape -- */
@media screen and (max-width: 1024px){
	
	/* .block-card .inner { width:70%} */
	.block-bluebox { width:auto}
	
	h2.half { width:auto; padding-right:0}
	.content-part .lft { padding-top:230px}
	.content-part .rt { min-height:0}
	.content-part .rt img { left:0; width:100% !important; height:auto !important; bottom:0 !important;}
	
	.content-part.logobg .cp-inner { background-size:90% auto}
	.content-part.logobg .cp-inner:before { height:250px}
	.content-part.logobg .twoCols .lft { width:60%;  padding-top:30px; padding-bottom:40px} 
	.content-part.logobg .twoCols .rt { width:40%}

	.textCols.twoCols .lft,
	.textCols.twoCols .rt { float:none; width:auto; padding: 0 !important}
	
	.toggleBox-wrap { left:30px}
	
	.kontakt.modalContent .row .lft { display:none}
	.kontakt.modalContent .row .rt{ width:auto; float:none; display:block}
	
	.greenBox strong { font-size:25px}
	.greenBox h1 { font-size:40px; line-height:40px}
	
	.shopHead.twoCols .rt { padding-top:20px}
    
    #teaser .teaser-infobox {width:66.66%}
    #teaser .teaser-infobox .text {padding:20px}
    #teaser .teaser-infobox .text em { font-size:11px; }
    #teaser .teaser-infobox .text strong { font-size: 20px; line-height: 30px;}
    #teaser .teaser-infobox .text small { font-size: 10px;}
	
}
@media screen and (min-width: 961px) and (max-width: 1020px){
    .block-card h3 {	font-size: 2.8vw; line-height: 3.1vw; margin-bottom: 0.7vw}
    .block-card:before {bottom: 20px}
    .block-card .inner {padding:20px;}
    .block-card .inner > strong {font-size:1.5vw}
    .block-card a.more:before {bottom:20px;}
    .block-card a.more {font-size:1.5vw}
    
    .shops .box:nth-child(even) .block-card a.more:before {left:20px}
    .shops .box:nth-child(odd) .block-card a.more:before {right:20px}
}
@media screen and (min-width: 769px) and (max-width: 960px){
    .block-card h3 {font-size: 2.8vw; line-height: 3.1vw; margin-bottom: 0.7vw}
    .block-card a.more {font-size:1.5vw}
    .block-card .inner > strong {font-size:1.5vw}
    .block-card:before {bottom: 15px}
    .block-card .inner {padding:15px; width: 65%}
    .block-card .inner > strong {font-size:1.5vw}
    .block-card a.more {font-size:1.5vw}
    .block-card a.more:before {bottom:15px;}
    .shops .box:nth-child(even) .block-card a.more:before {left:15px}
    .shops .box:nth-child(odd) .block-card a.more:before {right:15px}
}
/* -- Tablet Portrait  -- */
@media screen and (max-width: 768px){
	a#hamburger,
	#mainmenu { display:block}
	#topmenu { display:none}
	
	.grid.two .box { width:100%; padding-left:0 !important; padding-right:0 !important}
	.grid.three .box { width:50%}
	
	#container { min-width:750px}
	
	.shopHead { margin-bottom:20px}
	
	.shopDesc.row .lft, 
	.shopDesc.row .mid, 
	.shopDesc.row .rt,
	.grid.two .box,
	.grid.three .box { width:100%; float:none; padding-left:0; padding-right:0}
	
	.grid.angebote .block {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-content: stretch;
	}
	.grid.angebote .block .img { width: 40%}
	.grid.angebote .block .inner { margin-left: auto; width: 60%}
	
	.box:nth-child(even) .block-offer { flex-direction: row-reverse;}
    .box:nth-child(even) .block-offer .img {left: 0; right: auto}
	.box:nth-child(even) .block-offer .inner { margin-right: 0}
	
	.block-bluebox { margin-top:100px}
	.block-bluebox .img { width:300px; right:-100px}
	
	.content-part.logobg .cp-inner:before { height:150px}
	.toggleBox{ width:100%; background-size:100% 210px}
	.toggleBox-wrap { width:auto; left:30px; right:30px}
	
	fieldset.routenplaner .formSubmit { width:200px}

	
	.impressum.modalContent .content-wrap {
		column-count: auto;
		column-gap: 0;
	}
	
	.block-bluebox { width:auto; background-size:120% 100%; background-position:left top}
	.block-bluebox .img {width:45% !important; right:-120px; bottom:-10px}
	.block-bluebox .img img { height: auto !important; }
	.block-bluebox .inner { padding: 20px 160px 0 20px }
	.block-bluebox .inner p:last-child { margin-bottom:0}
	.block-bluebox .meta { padding:5px 20px 30px}
	
	.shops { margin-bottom:20px; bottom:50px}
	.shops .box:nth-child(even) .block-card .inner { right:auto; left:0}
	.shops .box:nth-child(even) .block-card a.more:before{ right:30px; left:0}
	.shops .box:nth-child(even) .block-card:before {right: auto; left:-100%}
	
	.content-part.offer h2 { font-size:30px; margin-bottom:10px}
	.content-part.offer p { margin-bottom:10px}
	
	.block .img img { width:100% !important; margin-left:0}
	.block-card .inner { width:50%}
	.block-card .btn { position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; opacity: 0;display:block;}
    
    #teaser { height: auto}
    #teaser .teaser-infobox {
        width:auto; position: relative; top: auto; right: auto; margin: -40px 30px 70px; 
    }
    #teaser .teaser-infobox .infobox-wrap{        
		display: flex;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-content: stretch;
		align-items: stretch;
	}
    #teaser .teaser-infobox .img {display:block; padding: 20px; margin: 0 20px 20px}
    #teaser .teaser-infobox .img img{ display: block; margin: 0 auto}
    #teaser .teaser-infobox .text{padding:30px; display: block;}
    #teaser .teaser-infobox .text em { font-size:14px; line-height: 20px }
    #teaser .teaser-infobox .text strong { font-size:30px; line-height: 35px;}
    #teaser .teaser-infobox .text small { font-size: 14px; line-height: 16px}
}
/* -- Smartphone Landscape -- */
@media screen and (max-device-width: 736px){
	a#hamburger,
	#mainmenu { display:block}
	#logo { margin-left:auto}
	
	#container { min-width:0}
	
	#header { height:50px}
	a#hamburger { top:5px}
	
	#logo { width:150px; padding-top: 15px}
	#logo a { max-width:150px; height:20px; background-size:contain}
	
	#mainmenu { top:50px}
	
	.toggleBox-wrap,
	.toggleBox { width:100%;position:static; }
	.toggleBox-wrap { height:auto}
	
	.toggleBox {transform:none; background:transparent;}
	.toggleBox h2{ padding:25px 20px 0}
	.toggleBox .inner { padding:15px 20px 20px;max-height:none}
	.toggleBox .inner p:first-child { padding-top:0}
	
	.toggleBox h2{color:#BCD100}
	.toggleBox h2 i { display:none}
	
	fieldset.routenplaner .formItem { width:auto; float:none; margin-bottom:20px}
	fieldset.routenplaner .formSubmit { width:100%; display:block; margin-left:0}
	
	.content-part.offer blockquote { font-size:18px}
	.content-part.logobg .cp-inner { padding-bottom:40px}
	
	.modalContent.impressum .row .lft, 
	.modalContent.impressum .row .rt { display:block; padding:0; width:auto}
	
	.modalContent.newsletter .row .lft { display: none} 
	.modalContent.newsletter .row .rt { display:block; padding:30px; width:auto}
	
	.modalContent.datenschutz {height: 85vh}
	.modalContent.datenschutz .row .lft, 
	.modalContent.datenschutz .row .rt { display:block; padding:0; width:auto}
	
	.modalContent.privacy-policy {height: 85vh}
	.modalContent.privacy-policy .row .lft, 
	.modalContent.privacy-policy .row .rt { display:block; padding:0; width:auto}
	
	fieldset.newsletter .formItem.half:nth-child(odd),
	fieldset.newsletter .formItem.half:nth-child(even){ padding-left:0; padding-right: 0}
	
	.block .img img { width:150% !important; margin-left:-25%}
	.block-card .inner { width:60%}
    
}
/* -- Smartphone Portrait -- */
@media screen and (max-device-width: 480px) {
    body {font-size:15px; line-height:22px}

	.row .lft, .row .mid, .row .rt,
	.grid.two .box,
	.grid.three .box { width:100%; float:none; padding-left:0; padding-right:0}
	
	.swiper-pagination { padding-left:20px; bottom:50px}
	
	#outerteaser { padding-top:50px}
     #teaser { height: auto}
	#teaser .swiper-wrapper{ height:300px}
    #teaser .teaser-infobox {width:auto; position: relative; top: auto; right: auto; margin: -40px 15px 60px; background-position: right bottom }
    #teaser .teaser-infobox .text strong { font-size:25px; line-height: 30px;}
    /*#teaser .teaser-infobox .img { display: none}
    #teaser .teaser-infobox .text{padding:30px; display: block}
    #teaser .teaser-infobox .text em { font-size:14px; line-height: 20px }
    #teaser .teaser-infobox .text strong { font-size:30px; line-height: 35px;}
    #teaser .teaser-infobox .text small { font-size: 14px; line-height: 16px} */
    
	#teaser .swiper-slide img{ height:inherit !important; width:auto !important} 
	#mainContent { padding: 0 15px}
	
	.block-card { margin-bottom:20px}
	.block-card:before{bottom:20px}
	.block-card .inner > strong { font-size:12px}
	.block-card h3 { font-size:20px; margin-bottom:5px}
	.block-card .inner { width:70%; padding:20px}
	.block-card .img { overflow:hidden}
	/*.block-card .img img { height:250px !important; width:auto !important} */
	.block-card a.more:before {bottom:20px}
	
	.block-bluebox .img { right:-60px}
	.block-bluebox .inner { padding:20px 90px 0 20px}
	
	.grid.angebote .block {display: block;}
	.grid.angebote .block .img{padding-bottom: 125%; width: auto; float: none; position: relative}
	.grid.angebote .block .inner{width: auto; float: none}
	
	.content-part:before { height:370px}
	.content-part .cp-inner { padding:20px}
	.content-part .rt  { /*min-height:200px */}
	
	.content-part .rt img{ position:static; margin:0 auto; display:block}
		
	.content-part.logobg .twoCols .lft { padding-top:30px; padding-bottom:40px}
	.content-part.logobg .twoCols {
		display: flex;
		flex-direction: column;
        flex-wrap: nowrap;
		justify-content: flex-start;
		align-content: stretch;
        align-items: stretch;
	}
	.content-part.logobg .twoCols .lft,
	.content-part.logobg .twoCols .rt { width:auto; float:none; /*padding:0 */}
	.content-part.logobg .twoCols .lft{
		order: 1;flex: 0 1 auto; align-self: auto;
	}
	.content-part.logobg .twoCols .rt{
		order: 0;flex: 0 1 auto;align-self: auto
	}
	.content-part.logobg .cp-inner { padding-bottom:0; background-image:none}
	.content-part.logobg .cp-inner:before { display:none }	
	
	.content-part.offer .row:before { display:none}
	.content-part.offer .row .lft { position:relative}
	.content-part.offer .row .lft:before { background:#2D3A3A; background-size:100% 100%; position:absolute; left:-25%; right:-25%; bottom:0; content:"";top:0; z-index:-1}
	
	/* -- Modal Window -- */
	
	.modaal-inner-wrapper { padding:30px 15px}
	button.modal-close { top:-7px}
	.modalContent { font-size:12px}
	.modalContent h2 { font-size:25px}
	.modalContent .row .rt { padding-left:0}
	.modalContent .row .lft { padding-right:0}
	.modalContent .shop { font-size:12px}
	
	.kontakt.modalContent {height: auto}
	.kontakt.modalContent h2{ margin-bottom:0}
	.kontakt.modalContent .row .lft { display:none}
	.kontakt.modalContent .row .rt { padding:15px}
	
	.modalContent.datenschutz h2,
	.modalContent.privacy-policy h2 { font-size: 20px}
	
	fieldset .formItem.half { width:auto; float:none}
	fieldset .formItem.half:nth-child(odd) { padding-right:0;}
	fieldset .formItem.half:nth-child(even) { padding-left:0;}
	fieldset .formItem.formCaptcha > label { width:auto; float:none}
	fieldset .formItem.formCaptcha input.formText { width: 100%}
	
	/* -- Shop Detail -- */
	
	.shopHead.twoCols .lft { padding-right:0}
	.shopHead.twoCols .rt { padding-left:0}
	.greenBox strong { font-size:25px}
	.greenBox h1 { font-size:45px;}
	
	.shopHead.twoCols .rt { padding-top:20px}

	.shopDesc { margin-bottom:20px}
	.shopDesc h2 { font-size:25px}	
	.shopDesc .lft ul { padding-left:10px}
	
	#footer { padding:15px 20px}
	
}
/* -- Smartphone Portrait - Kleine Displays -- */
@media screen and (max-device-width: 320px){
	body { font-size:12px; line-height:18px}
	h2 { font-size:18px}
	
	#teaser { height:200px}
    #teaser .teaser-infobox {width:95%; top:-95px}
    #teaser .teaser-infobox img {width:75px !important; height: auto !important}
    #teaser .teaser-infobox .text{padding:12px}
    #teaser .teaser-infobox .text em { font-size:10px; line-height: 12px }
    #teaser .teaser-infobox .text strong { font-size: 14px; line-height: 16px; margin-bottom: 5px}
    #teaser .teaser-infobox .text small { font-size: 10px; line-height: 12px}
	
	.greenBox strong { font-size:18px}
	.greenBox h1 { font-size:25px; margin-bottom:10px; line-height:normal}
	
	.modalContent h3 { font-size:18px}
	.modalContent .content-wrap { height:calc(80vh - 100px)}
	.impressum.modalContent { padding:15px}
	
	.content-part h2 { font-size:20px; margin-bottom:10px}
	.content-part.offer h2 { font-size:20px}
	.content-part.offer blockquote { font-size:14px}
	.content-part a.more { letter-spacing:2px; font-size:12px}
	
	.shopDesc h2 { font-size:18px}
	
	.block-bluebox .img { right:-40px}
	.block-bluebox .inner { padding:20px 50px 0 20px}
	
	.block-card .inner { width:90%; }
}