/* CSS Document */


@import url('/assets/css/navi.css');
@import url('/assets/css/coco.css');
@import url('/assets/css/form.css');
@import url('/assets/css/floating.css');
@import url('/assets/css/slick.css');
@import url('/assets/css/slick-theme.css');

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/fonts/assistant-300.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/assistant-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/assistant-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ALLGEMEIN */

*						{ margin: 0; padding: 0; box-sizing: border-box; outline: none; }

html				{ color: #333a3c; font-family: 'Assistant', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.35; }

h1					{ font-size: 2rem; padding: 2rem 1rem 0; line-height: 1; }
h1 span			{ color: #ceb889; font-size: 1.25rem; font-weight: 500; text-transform: uppercase; }
h2					{ color: #ceb889; font-size: 2.5rem; font-weight: 300; line-height: 1; margin: 0 0 2rem; text-transform: uppercase; }
h3					{ color: #333a3c; font-size: 1.75rem; font-weight: 500; margin: 0 0 1.5rem; }
h4					{ color: #ceb889; font-size: 1.125rem; font-weight: 700; letter-spacing: 1px; margin: 0 0 1rem; padding: 0; text-transform: uppercase;}
/* h4:after		{ border-bottom: 2px solid #ff791a; content: ""; display: block; width: 100%; } */
h5					{ color: #ceb889; font-size: 1.125rem; font-weight: 300; letter-spacing: 1px; margin: 0 0 1rem; text-transform: uppercase; }
h6					{ color: #333a3c; font-size: 1.375rem; margin: 1rem 0 1.5rem; }

a						{ color: #333a3c; text-decoration: none; }
br          { }
img         { display: block; max-width: 100%; }
p						{ font-size: 1.25rem; margin: 0 0 1.5rem; }
ul					{ list-style: none; margin: 0 0 1.5rem; }
ul li				{ font-size: 1.25rem; margin: 0 0 0.5rem; }
strong			{ color: #ceb889; font-weight: 700; letter-spacing: 1px; }
em					{ font-weight: 500; }
i						{ font-style: italic; }

/* STRUKTUR */


section			  { padding: 2rem 0; }

.flex				  { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; }
.flex-end		  { align-items: flex-end; }
.align_items  { align-items: center; }
.content		  { margin: 0 auto; max-width: 1200px; width: 96%; }

.box25				{ padding: 1.5rem; width: 25%; }
.box33				{ padding: 1.5rem; width: 33.333%; }
.box66				{ padding: 1.5rem; width: 66.666%; }
.box75				{ padding: 1.5rem; width: 75%; }
.box100				{ padding: 1.5rem; width: 100%; }


header			{  }

.logo				{ padding: 1.5rem 1.5rem 1rem; width: 100%; }
.logo img		{ float: left; height: 8rem; margin-right: 1.5rem; }

.menu				{ position: relative; width: 100%; z-index: 99999; }
.menu button	      { background: #ceb889; border: none; color: #ffffff; float: right; font-size: 1.125rem; font-weight: 700; height: 4rem; letter-spacing: 1px; padding: 0.5rem 0.625rem; text-transform: uppercase; width: 4rem; }
.menu button:hover	{ cursor: pointer; }
.menu svg		        { height: auto; width: 100%; }

#navigation		{ background: hsl(220,26%,96%); display: none; margin: 4rem 0 0; padding: 2rem; width: 100%; right: 0; }
#navigation		a	{ color: #333a3c; font-size: 1.125rem; }
#navigation		.title					{ color: #ceb889;  font-size: 1.125rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
/*.menu nav	.title:after	{ border-bottom: 2px solid #ff791a; content: ""; display: block; width: 100%; } */
#navigation	 a.stroke	            { position: relative; }
#navigation	 a.stroke:after      	{ content: ''; height: 1px; position: absolute; bottom: 0; left: 0; right: 0; color: transparent; background: #ceb889; width: 0%; transition: ease width 0.5s;  }
#navigation	 a.stroke:hover:after  { width: 100%; transition: ease width 1s;  }


#slider		     	      { background: url('/data/site/hohenzollern.jpg') no-repeat center center; background-size: cover; border-bottom: 5px solid #ceb889; box-shadow: 0px 0px 10px 5px #f3f5f8 inset; padding: 7% 0; }
#slider p     	      { font-size: 1.5vw; }
#slider p:last-child  { margin: 0; }
#slider p span 	      { color: #ceb889; font-size: 2.25vw; font-weight: 700; line-height: 1; text-transform: uppercase; }
#slider .icon         { margin: 0 0 1.5rem; width: 15%; }
#slider .slogan       { width: 70%; }

main              { position: relative; }
main ul						{ font-size: 1.25rem; margin-bottom: 1rem; list-style: none; }
main ul li				{ margin: 0 0 0.25rem 1rem; }
main ul li:before	{ color: #ceb889; content: "•"; margin: 0 0.5rem 0 -1rem; }

#teaser			      { background: #ceb889; color: #ffffff; padding: 3% 0; text-align: center; }
#teaser p		      { margin: 0 0 0.75rem; }

footer			     { background: #333a3c; color: #ffffff; font-size: 1rem; font-weight: 500; letter-spacing: 1px; padding: 3rem; }
footer a         { color: #ffffff; }
footer a:hover   { color: #dddddd; }
footer ul li     { font-size: 0.875rem; }
footer p         { font-size: 0.875rem; }

/* Styling */

.block			{ text-align: justify; }
.bold				{ font-size: 1.25rem; font-weight: 700; }
.border			{ border: solid #ceb889; border-width: 0 0 0 0.25rem; }
.button			{ background: #ceb889; color: #ffffff; font-weight: 400; margin: 0 0.75rem 0.75rem 0; padding: 0.5rem 1rem; text-transform: uppercase; }
.button:hover			{ background: #f3f5f8; color: #333a3c; }
.grey				{ background: #f3f5f8; }
.gold       { color: #ceb889; }
.image			{ margin: 0 0 1.5rem; }
.image img	{ border-radius: 0 3px 3px 0; }
.mabo       { margin-bottom: 8rem; }
.note				{ background: #ffffff; box-shadow: 0px 0px 5px 2px rgba(51,58,60,0.25); padding: 2rem; }
.sidebar p	{ font-size: 1rem; }
.small			{ font-size: 1rem; font-weight: 300; text-transform: uppercase; }


/* Objekte */


.objects .headline			    	{ color: #333a3c; display: block; font-size: 2rem; font-weight: 300; margin: 0 0 2.25rem; text-transform: uppercase; text-align: center; text-transform: uppercase; }
.objects .item					    	{ background: #fff; box-shadow: 0px 0px 5px 2px rgba(51,58,60,0.25); margin: 0 0 1.5rem; padding: 1.75rem; position: relative; width: 100%; }
.objects .item .ribbon		    { background: #ceb889; color: #ffffff; font-size: 1.25rem; font-weight: 700; height: 2.5rem; letter-spacing: 1px; padding: 0.375rem 1rem 0.375rem 0.75rem; position: absolute; right: 0; text-transform: uppercase; top: 0.5rem; }
.objects .item .ribbon:before	{ border-top: 2.5rem solid #ceb889; border-left: 2.5rem solid transparent; content: ""; height: 0; left: -2.5rem; position: absolute; top: 0; width: 0; }
.objects .image				    		{ padding: 1rem; position: relative; width: 25%; }
.objects .info				    		{ padding: 1.25rem; width: 75%; }

.objects .placeholder		{ color: #ceb889; font-weight: 700; left: 1rem; position: absolute; right: 1rem; top: 55%; text-align: center; }
.objects .location			{ font-size: 1.25rem; line-height: 1; }
.objects .location svg	{ height: auto; width: 1rem; }

.objects .entry			            	{ margin-bottom: 2rem; width: 33.333%; }
.objects .entry > span	            { display: block; }
.objects .entry > span:first-child	{ color: #333a3c; }
.objects .entry > span:last-child		{ color: #ceb889; display: inline-block; font-size: 2.5rem; margin-bottom: 0.5rem; }
.objects .features span						{ background: #f3f5f8; border-radius: 3px; display: inline-block; font-size: 1rem; margin: 0 0.25rem 0.375rem 0; padding: 0.25rem 0.5rem; width: auto; }

.detail .status				{ font-size: 1.5rem; font-weight: 700; line-height: 1; text-transform: uppercase; }
.detail .location	    { font-size: 1.25rem; line-height: 1; }
.detail .location svg	{ height: auto; width: 1rem; }

.detail .entry                  { margin-bottom: 2rem; width: 20%; }
.detail .entry span             { display: block; }
.detail .entry span:first-child { color: #333a3c; }
.detail .entry span:last-child  { color: #ceb889; display: inline-block; font-size: 2.5rem; margin-bottom: 0.5rem; }
.detail .features span	        { background: #f3f5f8; border-radius: 3px; display: inline-block; font-size: 1rem; margin: 0 0.25rem 0.375rem 0; padding: 0.25rem 0.5rem; }

.gallery						{ background: #f3f5f8; overflow: hidden; position: relative; }
.gallery .no_filter { height: 100%; margin: 0 auto; object-fit: contain; position: relative; z-index: 1; width: auto; }
.gallery .filter		{ bottom: 0; filter: grayscale(10%) brightness(125%) opacity(50%) contrast(100%); left: 0; object-fit: cover; position: absolute; right: 0; top: -50%; width: 100%; z-index: 0; }

.gallery .slick-prev,
.gallery .slick-next,
.gallery .slick-prev:hover,
.gallery .slick-next:hover,
.gallery .slick-prev:active,
.gallery .slick-next:active { background: #f3f5f8; height: 3rem; width: 2.5rem; z-index: 9999; }

.gallery .slick-prev        { border-radius: 0 3px 3px 0; }
.gallery .slick-next        { border-radius: 3px 0 0 3px; }
.gallery .slick-prev:before,
.gallery .slick-next:before { filter: invert(86%) sepia(16%) saturate(700%) hue-rotate(359deg) brightness(86%) contrast(85%); }

.gallery .slick-prev { left: 0; }
.gallery .slick-next { right: 0; }
.gallery .slick-slide img { transition: ease 0.5s; }
.gallery .slick-slide.slick-current img { opacity: 1; transition: ease 1.5s; }
.gallery .slick-slide.slick-current figure figcaption { opacity: 1; transition: ease 1.5s; }

#buchung      { background: #ffffff; border-radius: 3px 3px 0 0; bottom: 0; box-shadow: 0px 0px 10px 1px rgba(51,58,60,0.25); left: 0; margin: 0 auto; position: fixed; right: 0; text-align: center; width: auto; }
#buchung a    { background: #ceb889; color: #ffffff; display: inline-block; font-size: 1.25rem; font-weight: 700; margin: 0 auto; padding: 0.5rem 1rem; text-align: center; width: auto; }


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


	#slider p     	      { font-size: 2vw; }
	#slider p span 	      { font-size: 3vw; }
	#slider .icon         { width: 10%; }
	#slider .slogan       { width: 75%; }

	.objects .image				    		{ width: 33.333%; }
	.objects .info				    		{ width: 66.666%; }
	.objects .item .ribbon		    { font-size: 1rem; height: 2rem; padding: 0.35rem 1rem 0.35rem 0.25rem; }
	.objects .item .ribbon:before	{ border-top: 2rem solid #ceb889; border-left: 2rem solid transparent; left: -2rem; }

	footer .box25:nth-child(1)    { order: 1; width: 33.333%; }
	footer .box25:nth-child(2)    { order: 2; width: 33.333%; }
	footer .box25:nth-child(3)    { order: 4; width: 100%; }
	footer .box25:nth-child(4)    { order: 3; width: 33.333%; }

}

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

	h2					{ font-size: 2rem; }
	h3					{ font-size: 1.5rem; }


	.menu button	      { height: 3.5rem; width: 3.5rem; }

	.box25 { width: 50%; }

	.objects .headline			    	{ font-size: 1.75rem; }

}

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

	.box25				{ padding: 1rem; }
	.box33				{ padding: 1rem; width: 100%; }
	.box66				{ padding: 1rem; width: 100%; }
	.box75				{ padding: 1rem; }
	.box100				{ padding: 1rem; }




	#slider p     	      { font-size: 1rem; }
	#slider p span 	      { font-size: 1.375rem; }
	#slider .icon         { display: none; }
	#slider .slogan       { width: 100%; }

	.objects .entry			  	{ margin-bottom: 1rem; width: 50%; }
	.detail .entry          { margin-bottom: 1rem; width: 33.333%; }

	footer			                { padding: 1rem; }
	footer .box25:nth-child(1)  { order: 1; width: 50%; }
	footer .box25:nth-child(2)  { order: 2; width: 50%; }
	footer .box25:nth-child(3)  { order: 4; width: 50%; }
	footer .box25:nth-child(4)  { order: 3; width: 50%; }

}

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

	h1					{ font-size: 1.75rem; padding: 0.5rem 1rem 0; line-height: 1; }
	h2					{ font-size: 1.5rem; }
	h3					{ font-size: 1.25rem; }

	.logo img		{ height: 6rem; margin-right: 1.5rem; }


	.box25 { width: 100%; }

	.objects .item { padding: 2rem 0.75rem 0.75rem 0.75rem; }
	.objects .image				    		{ padding: 0.875rem; margin: 0!important; width: 100%; }
	.objects .info				    		{ padding: 1rem; width: 100%; }
	.objects .entry			  	{ margin-bottom: 1rem; width: 100%; }

	.detail .entry          { margin-bottom: 1rem; width: 50%; }
}

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