@charset "UTF-8";
/* module
ferienhaus-am-mattenweg.de
 
mike lang
01.2022


lila: rgb(84,13,88)
Arlberg-Gold: rgb(172,138,92)
beige: rgb(231,226,213)
Antrazit: rgb(112,112,114)
Taubenblau: rgb(148,173,205)
Mittelgrün: rgb(151,166,90)
Matsch: rgb(152,139,112)
türkis: rgb(97,157,179)
mittelbeige(217,208,191)

*/





/*module*/
/* text modul */
.txt-img { padding: 0 20px 0 20px; }

/* zentriert schmaler dagmar */
.txt-img.txt { padding: 0 50px 0 50px; }

.txt-img.txt.left { text-align: left; }


/* vollbild text/bild zweispalter */
.vollbild { width:100%; }
.vollbild .txt-img.img { width:100%; }
.img_zweispalter { border-radius: 10px; }

/* unten kein abstand vom vollbild bild zum footer */
#content div.vollbild.img:last-child .txt-img.img { margin-bottom: 0; }



/* text zweispaltig */
#content .row.txt-img { /*margin-bottom: 20px;*/ }

.txt + p { margin: -.4em 0 0 0; }


.col .txt { padding: 0 1em 0 1em; } 
.col.one { text-align: right; } 
.col.two { text-align: left; } 

.flexbox-container {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: flex-start;
}

.flexbox-container.reverse {
	flex-direction: column-reverse;
}

.col.one.flexbox-container {
	align-items: flex-end;
}

.col.two.flexbox-container {
	align-items: flex-start;
}


.flexbox-item {
	flex: 0 1 auto;
}

.flex-item:nth-child(1) {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto; 
}

.flex-item:nth-child(2) {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto; 
}


/* bild modul */
.txt-img.img { margin: 40px auto 30px auto; /*border-radius: 10px; overflow: hidden;*/  }
.txt-img img { width: 100%; border-radius: 10px; }
.vollbild.img .txt-img img { border-radius: 0; /*overflow: hidden;*/  }
/*.img_unterschrift { border-top: 4px solid; border-top-color: #cfcfcf; margin-top: 5px; text-align: right; width: 100%; display: inline-block; padding: 8px 0 2px 0;  }*/
.rahmen { border: solid 1px #cacaca; }





/* tabelle*/
#content .txt-img.table { 
	overflow-x: auto;
	text-align: left; 
	margin-top: 70px; 
	margin-bottom: 30px; 
}

#content .txt-img.table::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 5px;
	height: 5px;
}

#content .txt-img.table::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0,0,0,.5);
	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


.table table { 
	table-layout: fixed; /*same column width & faster rendering */
	overflow-x: scroll; 
	margin-top: 20px; 
	width: 100%; 
	min-width: 900px; 
	border-collapse: collapse;
}


.table table td,
.table table th { 
	border-left: 0 white solid;
	border-right: 0 white solid;
}


.table table.ausstattung td,
.table table.ausstattung th { 
	border-left: 25px white solid;
	border-right: 25px white solid;
}





.table table tr td:first-child, 
.table table tr td:last-child,
.table table tr th:first-child, 
.table table tr th:last-child { 
	border-left: 0;
	border-right: 0;
} 


.table table.ausstattung td,
.table table th { font-family: 'Bree Serif', Times, serif; font-style: normal; font-weight: 400; color: rgb(172,138,92); letter-spacing: .01em; background-color: white; padding: .4em .5em .6em .5em; font-size: 1.1em; }


.table td,
.table th { padding: .4em .5em .2em .5em; }

.table th { text-align: left; }
.table.ausstattung td 						{ border-bottom: 2px solid rgba(213,212,212,1);}
.table.ausstattung tr:first-of-type td { border-top: 2px solid rgba(213,212,212,1);}




/*table.table td { padding-right: 2em; padding-bottom: 0.5em; }
th { text-align: left; padding-bottom: 1em; }

*/

.table table tr:nth-child(odd) { background-color: rgba(243,242,242,1); } /*blaugrau*/

thead tr,
.table table.table.ausstattung tr:nth-child(odd) { background-color: transparent; } 


/* wozu?
.table td:last-of-type { text-align: left; }
.table td:first-of-type { text-align: left; }

*/




/*galerie unite_gallery*/
#breadcrumb + .unite_gallery { margin: 0 auto 50px auto; } /*also direkt unter der NAV*/
.unite_gallery { margin: 50px 0 50px 0; }
.unite_gallery.container-fluid { width: 100%; padding: 0 10px 0 10px; }
.unite_gallery.container { width: 50%; margin: 50px auto 50px auto; }
.ug-textpanel-title {  
-webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none; 
}

.ug-thumb-overlay { /*background-color: rgba(84,13,88,.7) !important;*/ background-color: rgba(172,138,92,.7) !important; }
.ug-thumb-wrapper { border-radius: 10px; /*border: solid 1px #cacaca;*/ }



/* slideshow */ 
.flexslider.container-fluid { width: 100%; }
.flexslider.container { margin: 30px auto 50px auto; border-radius: 10px;  }


/* google map */
.container-fluid { width: 100%; }
.map_canvas { min-height: 300px; margin-bottom: 75px; margin-top: 30px; }

/* video plyr */
.video { margin-top: 50px;  margin-bottom: 80px; }


/* cookie_warning für youtube und google maps */
.cookie_warning_video { 
	background-color: rgb(190,198,100);
	margin-top: 50px;
	margin-bottom: 80px;
	padding: 10px 10px 10px 120px;
	background-image: url(../images/video_play_button.svg);
 	background-position: 20px center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
}

.cookie_warning_map { 
	background-color: rgb(190,198,100);
	margin-top: 50px;
	margin-bottom: 80px;
	padding: 10px 10px 10px 120px;
	background-image: url(../images/map_button.svg);
 	background-position: 20px center;
	background-repeat: no-repeat;
	background-size: 80px 80px;
}


.cookie_warning_txt { padding: 30px 30px 10px 30px; background-color: rgb(168, 177, 58); }
.cookie_warning_txt p,
.cookie_warning_txt h2,
.cookie_warning_txt a { font-weight: 600!important; color: white!important; }


/* sitemap */
/*.col-xs-6 { text-align: left; }*/
#sitemap { text-align: center; margin: 50px 0 0 0; }

#sitemap > ul {display: inline-block; padding: 40px 30px 40px 30px; /*background-color: rgb(172,138,92);*/ border-radius: 10px; border: solid 1px rgb(172,138,92); }
#sitemap ul ul { padding-left: 30px; }
#sitemap ul ul li { margin: 0 0 0 0; }
#sitemap ul li a { margin: 0 0 5px 0; padding: 2px 15px 2px 10px; font-size: 1.3em; /*color: rgb(172,138,92);*/ text-decoration: none; }
#sitemap ul li a:before { font-family: 'Font Awesome 5 Free'; color: rgb(172,138,92); margin: 0 5px 0 0; font-size: 1em; font-weight: 700; content: "\f105"; }
/*#sitemap ul li a:before { display: none; }*/
#sitemap ul li a:hover { color: rgb(172,138,92);  }
#sitemap ul li a:hover:before { color: rgb(172,138,92); }


#sitemap ul { list-style-type: none !important; margin: 0; text-align: left; }
/*#sitemap ul:first-child { padding-top: 10px; }*/
          
#sitemap ul:last-child { margin-bottom: 10px; }
#sitemap ul:last-child a { font-size: 1em; }
#sitemap ul:last-child a:before { font-size: 20px; }









/*footer adress modul */
#footer { font-size: 1em; color:white; }
.footer_firma_adresse {}
#footer span,
#footer .footer_titel { font-weight:700; }
.footer_table a { }
.footer_firma { margin-bottom: 5px; }
.footer_adresse,
.footer_adresse a { color: white;  margin-bottom: 5px;}
.copyright { margin: 40px 0 0 0; }





/* icons */
div.icons { display:inline-block; margin: 0 0 0 0; padding: .5em; text-align: center; vertical-align: top;  }

.icon_border { display: inline-block; position: relative; height:80px; width:80px; border-radius:50%; border: 2px solid /*rgba(88,129,166,1)*/; /*background-color: rgba(104,132,29,1);*/ }
.icon_border_no { display: inline-block; position: relative; height:80px; width:80px; border-radius:50%; border: 2px solid transparent; }


div.icons span.icon { position: absolute; top: 50%;left:50%; margin-top: -25px; margin-left: -25px; text-align: center; font-size:50px;  }

div.icons strong {font-size: 1.3em; font-family: 'Bree Serif', Times, serif; margin: 0 0 1em; font-style: normal; font-weight: 400; color: rgb(126,33,134); letter-spacing: .01em;}

.countnr1,
.countnr2,
.countnr3 { text-align: center; }

.countnr1 .icons { width: 35%; }
.countnr2 .icons { width: 35%; }
.countnr3 .icons { width: 32%; }





/* accordion faq */
/* abstand zu anderen modulen */
.txt-img + .mod-acc { margin-top: 70px; }
.mod-acc + .txt-img,
.mod-acc + .unite_gallery { margin-top: 60px; }

/* abstand der accordion module untereinander */
.mod-acc + .mod-acc { margin-top: 0; }


.mod-acc { 
	background-color: rgba(172,138,92,.1); 
	transition: background-color .5s ease-in;
	overflow: hidden;
	text-align: left !important; 
	border-top: 2px solid rgba(213,212,212,1); 
}
.mod-acc.mod-acc-open { 
	background-color: rgba(172,138,92,.2); 
	transition: background-color .5s ease-in;
}
.mod-acc.mod-acc-open .mod-acc-details {
	padding: 15px 30px 20px 20px;
	opacity: 1;
	height: auto;
	transition: opacity .5s ease-in;
	overflow: visible;
}

.mod-acc h4 {
/* dagmar */
	font-family: 'Bree Serif', Times, serif; font-style: normal; font-weight: 400; color: rgb(172,138,92); letter-spacing: .01em; 
/* /dagmar */
	/*font-weight: 700;
	font-size: 1.1em; 
	color: rgb(126,33,134);
	*/
	cursor: pointer;
	line-height: 160%; 
	padding: 15px 70px 0 20px;
	background-image: url(../images/icon_pfeil_down_grey_dag.svg);
	background-position: calc(100% - 20px) 20px;
	background-repeat: no-repeat;
	background-size: 25px 25px;
	font-size: 1.1em;
}

.mod-acc-open h4 { background-image: url(../images/icon_pfeil_up_grey_dag.svg); }

.mod-acc .mod-acc-details {
	
	padding: 15px 30px 0 20px;
	opacity: 0; 
	height: 0;
	overflow: hidden;

 }


 
 
/* teaserbox / teaser / teaser_item */
/* teaser artikelliste rex_linklist Bild Text UNTER_einander */
.teaserbox.unter { }

.unter .teaser {
	width: 100%;
	display: flex;
}


.unter .teaser_item { 
	flex-grow:1;
	flex-basis:50%;
	border-radius: 10px;
} 







/* teaser artikelliste rex_linklist Bild Text NEBEN_einander */
.teaserbox.neben {
	display: -ms-flexbox;
	display: flex;
	flex-direction: row; /*  default und damit unnötig, hier nur Verdeutlichung und bei responsive */
	flex-wrap: wrap;
}

.neben .teaser { 
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column; 
	    -ms-flex: 1; 
	        flex: 1;
}


.neben .txt_wrapper {
	border-radius: 10px 10px 0 0;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto; /*nur mit auto funtioniert das auf edge u ie */
}

.neben .img_wrapper { 
	height: 300px; 
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}




/* teaser artikelliste rex_linklist Bild Text UNTER & NEBEN einander */
.teaserbox {
	width: 100%;
	margin: 50px 0 50px 0;
}


.unter .teaser a,
.neben .teaser a {
	text-decoration: none !important; 
	color: white !important;
}

.unter .txt_wrapper,
.neben .txt_wrapper { padding: 40px 40px 20px 40px; text-align: center; }
.teaser_h1 { font-size: 1.7em; }


.teaser_item { overflow: hidden; }

.unter .teaser_img,
.neben .teaser_img { display: block; height: 100%; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; overflow: hidden; }

.more { display: inline-block; padding: 8px 10px 10px 10px; border: 1px solid white; border-radius: 5px; margin: 10px; }

.bg_color_1 { background-color: rgb(84,13,88); } /*lila*/
.bg_color_2 { background-color: rgb(172,138,92); } /*Arlberg-Gold*/
/*.bg_color_3 { background-color: rgb(231,226,213); }*/ /*beige  (zu hell)*/
.bg_color_4 { background-color: rgb(112,112,114); } /*Antrazit*/
.bg_color_5 { background-color: rgb(148,173,205); } /*Taubenblau*/
.bg_color_6 { background-color: rgb(151,166,90); } /*Mittelgrün*/
.bg_color_7 { background-color: rgb(152,139,112); } /*Matsch*/
.bg_color_8 { background-color: rgb(97,157,179); } /*türkis*/
/*.bg_color_9 { background-color: rgb(217,208,191); }*/ /*mittelbeige (zu hell)*/







/* 
animation 
Prefixing nicht vergessen: 
transition "ease" ist default und muss nicht extra genannt werden 
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

.animate {
	/*width: 100%; height: 100px; text-align: left;*/
	-webkit-transform: translate(-200px, 0px);
	    -ms-transform: translate(-200px, 0px);
	        transform: translate(-200px, 0px);
	opacity: .1;
	-webkit-transition: opacity 1s,-webkit-transform 1s;
	transition: opacity 1s,-webkit-transform 1s;
	-o-transition: opacity 1s,transform 1s;
	transition: opacity 1s,transform 1s;
	transition: opacity 1s,transform 1s,-webkit-transform 1s;
}

.links	{ 
	-webkit-transform: translate(-200px, 0px); 
	    -ms-transform: translate(-200px, 0px); 
	        transform: translate(-200px, 0px);
}
.rechts { 
	-webkit-transform: translate(200px, 0px); 
	    -ms-transform: translate(200px, 0px); 
	        transform: translate(200px, 0px);
}
.unten { 
	-webkit-transform: translate(0px, 150px); 
	    -ms-transform: translate(0px, 150px); 
	        transform: translate(0px, 150px);
}


/* bisschen Abwechslung: jedes zweite ne andere Geschwindigkeit */
.animate:nth-child(odd){ 
	-webkit-transition: opacity .8s,-webkit-transform .8s; 
	transition: opacity .8s,-webkit-transform .8s; 
	-o-transition: opacity .8s,transform .8s; 
	transition: opacity .8s,transform .8s; 
	transition: opacity .8s,transform .8s,-webkit-transform .8s;
}


/* 
1) schon im Viewpoint sichtbar & animiert wenn mann von oben die seite lädt. wenn man unten ist und reload macht sind die oberen bei hochscrollen nicht animiert
2) nach scrollen im Viewpoint sichtbar 
*/
.already-in {
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
	opacity: 1;
}

.come-in {
	-webkit-transform: translate(0px, 0px);
	    -ms-transform: translate(0px, 0px);
	        transform: translate(0px, 0px);
	opacity: 1;
}







/*Abstand Trennlinie (hr) mit Sterne oder Punkte */
.hr { clear: both; width: 100%; }

.hr .trenner span { 
	height: 100%; 
	display: flex;
	justify-content: center;
	align-items: center;
}

/*
.hr .trenner.sterne { height: 60px !important; }
.hr .trenner.punkte { height: 50px !important; }
*/
.hr .trenner.sterne img { height: 20px; width: 20px; margin: 0 2px 0 2px;  }
.hr .trenner.punkte img { height: 4px; width: auto; margin: 0;  }







/* Smartphones */
@media only screen and (min-width: 320px) { 

	.txt-img,
	.txt-img.txt { padding: 0 10px 0 10px; }
	.vollbild .txt-img { padding: 0; }
	.unite_gallery.container { width: 100%; padding: 0 10px 0 10px; }
	.flexslider.container { width: calc(100% - 20px); }


			
	.countnr1 .icons,
	.countnr2 .icons,
	.countnr3 .icons { width: 100%; }
	
	.flexbox-container { display: block; }
	.zweispalter { padding: 0 10px 0 10px; }
	.row.txt-img { padding: 0 0 0 0; }
	.col { margin-bottom: 20px; } 
	.col.one { text-align: left; } 
	.spalte_50_50 .col.one,
	.spalte_50_50 .col.two { width: 100%; }

	.spalte_40_60 .col.one,
	.spalte_60_40 .col.two { width: 100%; }
	.spalte_40_60 .col.one p { font-weight: 500; padding: 0; }

	.spalte_40_60 .col.two,
	.spalte_60_40 .col.one { width: 100%; }
	
	.unter .teaser { flex-direction: column; -ms-flex-direction: column;}
	.unter .teaser_item.img_wrapper { height: 300px; }

	.unter .uneven .txt_wrapper { order: 1; margin: 0 0 10px 0; }
	.unter .uneven .img_wrapper { order: 2; margin: 0 0 10px 0; }
	
	.unter .even .txt_wrapper { order: 1; margin: 0 0 10px 0; }
	.unter .even .img_wrapper { order: 2; margin: 0 0 10px 0; }
	
	.teaserbox.neben { flex-direction: column; -ms-flex-direction: column;}
	
	.neben.count_3 .teaser{ flex-basis: 100%; }
	.neben.count_3 .teaser { margin: 5px 0 5px 0; }
	.neben.count_3 .teaser:nth-child(3n-2) { margin: 5px 0 5px 0; }
	.neben.count_3 .teaser:nth-child(3n+0) { margin: 5px 0 5px 0; }
	
	.neben.count_2 .teaser{ flex-basis: 100%; }
	.neben.count_2 .teaser { margin: 5px 0 5px 0; }	
	.neben.count_2 .teaser:nth-child(2n) { margin: 5px 0 5px 0; }
	.neben.count_2 .teaser:nth-child(2n-1) { margin: 5px 0 5px 0; }
}


/* Smartphones (large z.B iphone 6 od ipad portrait) */
@media only screen and (min-width:667px) {

	.txt-img,
	.txt-img.txt  { padding: 0 40px 0 40px; }
	.vollbild .txt-img { padding: 0; }
	.unite_gallery.container { width: 100%; padding: 0 40px 0 40px; }
	.flexslider.container { width: calc(100% - 80px); }
	
	.countnr1 .icons,
	.countnr2 .icons,
	.countnr3 .icons { width: 100%; }
	
		
	.row { display: block; } 
	.row.txt-img { padding: 0 0 0 0; }
	.col { margin-bottom: 20px; } 
	.col.one { text-align: left; } 
	.zweispalter { margin: 0 0 0 0; }
	.spalte_50_50 .col.one,
	.spalte_50_50 .col.two { width: 100%; }

	.spalte_40_60 .col.one,
	.spalte_60_40 .col.two { width: 100%; }
	.spalte_40_60 .col.one p { font-weight: 500; padding: 0; }

	.spalte_40_60 .col.two,
	.spalte_60_40 .col.one { width: 100%; }
	
	
	.unter .teaser { flex-direction:column; -ms-flex-direction: column;}
	.unter .teaser_item.img_wrapper { height: 300px; }

	.unter .uneven .txt_wrapper { order: 1; margin: 0 0 10px 0; }
	.unter .uneven .img_wrapper { order: 2; margin: 0 0 10px 0; }
	
	.unter .even .txt_wrapper { order: 1; margin: 0 0 10px 0; }
	.unter .even .img_wrapper { order: 2; margin: 0 0 10px 0; }
	
	.teaserbox.neben { flex-direction: column; }
	
	.neben.count_3 .teaser{ flex-basis: 100%; }
	.neben.count_3 .teaser { margin: 5px 0 5px 0; }
	.neben.count_3 .teaser:nth-child(3n-2) { margin: 5px 0 5px 0; }
	.neben.count_3 .teaser:nth-child(3n+0) { margin: 5px 0 5px 0; }
	
	.neben.count_2 .teaser { flex-basis: 100%; }
	.neben.count_2 .teaser { margin: 5px 0 5px 0; }	
	.neben.count_2 .teaser:nth-child(2n) { margin: 5px 0 5px 0; }
	.neben.count_2 .teaser:nth-child(2n-1) { margin: 5px 0 5px 0; }
}
	
	
/*styles for 1024px and up, u.A. ipad landscape */
@media only screen and (min-width: 1024px){

	.txt-img  { padding: 0 50px 0 50px; }
	.txt-img.txt { padding: 0 50px 0 50px; }
	.map_canvas,
	.map 			{ height: 416px; width: 100%; }
	.unite_gallery.container { width: 100%; padding: 0 50px 0 50px; }
	.flexslider.container { width: calc(100% - 100px); }
	
	.countnr1 .icons { width: 35%; }
	.countnr2 .icons { width: 35%; }
	.countnr3 .icons { width: 32%; }
	
	.row {display: flex; /* equal height of the children */}
	.row.txt-img { padding: 0 0 0 0; }
	.zweispalter { margin: 50px 0 50px 0; padding: 0 50px 0 50px; }
	.col { margin-bottom: 0; } 
	.col.one { margin: 0 5px 0 0; text-align: right; }
	.col.two { margin: 0 0 0 5px; }
	
	.spalte_50_50 .col.one,
	.spalte_50_50 .col.two { width: 50%;}

	.spalte_40_60 .col.one,
	.spalte_60_40 .col.two { width: 40%; }
	.spalte_40_60 .col.one p { font-weight: 500; padding: 0; }

	.spalte_40_60 .col.two,
	.spalte_60_40 .col.one { width: 60%; }
	
	


	
	
	.unter .teaser { flex-direction:row; -ms-flex-direction: row;}
	.unter .teaser_item.img_wrapper { height: auto; }

	.unter .uneven .txt_wrapper { order: 1; margin: 0 10px 10px 0; }
	.unter .uneven .img_wrapper { order: 2; margin: 0 0 10px 0; }
	
	.unter .even .txt_wrapper { order: 2; margin: 0 0 10px 0; }
	.unter .even .img_wrapper { order: 1; margin: 0 10px 10px 0; }
	
	
	.teaserbox.neben { flex-direction: row; -ms-flex-direction: row;}
	
	.neben.count_3 .teaser{ flex-basis: calc(33% - 20px); }
	.neben.count_3 .teaser { margin: 5px 5px 5px 5px; }
	.neben.count_3 .teaser:nth-child(3n-2) { margin: 5px 5px 5px 0; }
	.neben.count_3 .teaser:nth-child(3n+0) { margin: 5px 0 5px 5px; }
	
	.neben.count_2 .teaser { flex-basis: calc(50% - 10px); /*legt fest das möglichst 3 in einer reihe sind abzüglich der margins*/ }
	.neben.count_2 .teaser { margin: 5px 5px 5px 5px; }	
	.neben.count_2 .teaser:nth-child(2n) { margin: 5px 0 5px 5px; }
	.neben.count_2 .teaser:nth-child(2n-1) { margin: 5px 5px 5px 0; }
}

	
/*styles for 1280px and up */
@media only screen and (min-width: 1200px){

	.txt-img { padding: 0; }
	.unite_gallery.container,
	.flexslider.container { width: 70%; padding: 0; }
	.zweispalter { margin: 50px 0 50px 0; padding: 0; }


}


/*styles for 1600px and up */
@media only screen and (min-width: 1600px){

	.txt-img { padding: 0; }
	.unite_gallery.container,
	.flexslider.container { width: 60%; padding: 0;}
}



@media only screen and (min-width: 2000px){

	.txt-img { padding: 0; }
	.unite_gallery.container,
	.flexslider.container { width: 50%; padding: 0;}
}