/********************************************/
/*             ALLGEMEINE STYLES            */
/********************************************/
	
html, body {
  /*height: 100%;*/
  padding: 0 !important;
  margin: 0 !important;
  font-family: Raleway, Arial, Helvetica, sans-serif;
  background: #F1F1F1;
  color: #454545;
}
p {
    font-size: 1.1em;
    line-height: 1.5em;
}
a:link,
a:hover,
a:active,
a:visited {
	color: #F3F3F3;
	text-decoration: underline;
}

#mainwrapper {
	background: #f1f1f1;
	z-index: 1;
	position: relative;
}





/********************************************/
/*            GOOGLE WEB-FONTS              */
/********************************************/

/** Raleway lokal gehostet **/
@font-face {
  font-family: 'Raleway';
  src: url(fonts/raleway-regular-webfont.woff2) format('woff2'),
       url(fonts/raleway-regular-webfont.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/** Corinthia lokal gehostet **/
@font-face {
	font-family: 'Corinthia';
	src: url(fonts/corinthia-subset.woff2) format('woff2'),
	     url(fonts/corinthia-subset.woff) format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/** Allura lokal gehostet **/
@font-face {
	font-family: 'Allura';
	src: url(fonts/allura-subset.woff2) format('woff2'),
	     url(fonts/allura-subset.woff) format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}



.corinthia-tall {
  font-family: "Corinthia", cursive;
  font-weight: 700;
  font-style: normal;
  font-size: 5em;
  padding: 10px 0;
  margin: 0;
}
.allura-regular {
  font-family: "Allura", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 1001px) {
	.corinthia-tall {
		font-size: 4.2em;
		line-height: 1em;
		padding: 30px 0 0 0;
	}
	.allura-regular {
		font-size: 2.2em;
		line-height: 1em;
		padding: 0 0 20px 0;
	}

}





/********************************************/
/*               STICKY HEADER              */
/********************************************/
		
.top-container {
  background-color: #FFEFEF !important;
  padding: 30px;
  text-align: center;
}
.top-container h1 {
	color: #a97d39;
	font-weight: bold;
}

.header {
  position: sticky;
  background-color: #453E3D;
  top: 0;
  z-index: 9999;
}

.content {
  /*padding: 16px;*/
}
		
		
		
		
		
		
	
		
		
/********************************************/
/*         RESPONSIVE NAVIGATION            */
/********************************************/

.navbar_small {
	opacity: 1;
	width: 100%;
	margin: 0 auto;
	background-color: #453E3D;
	overflow: auto;
	font-size: 1em;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	/*gap: 10px;*/
	/**padding-bottom: 10px;
	background: linear-gradient(to top, rgba(0,0,0,0),rgba(0,0,0,1) 10px,rgba(0,0,0,1));**/	
}

.navbar_small a {
	padding: 20px 0px;			
	text-align: center;
	text-decoration: none;
	width: 25%;
	max-width: 160px;
}
			
			
.nav-item {
	text-decoration: none;
	position: relative;
	transition: all ease-in-out 250ms;
}

.nav-item:hover,
.active {
	background-color: #DCA1A1;
	color: #333 !important;
	font-weight: bold;
}



@media screen and (min-width:1001px) {
	.navbar_small {
		width: 85%;
	}
	.navbar_small a {
		min-width: 160px;
	}
}







/********************************************/
/*         HAUPTBILDER STARTSEITE           */
/********************************************/		
.content {
	z-index: 100;
}		
.start-images {
	display: flex;
	justify-content: space-evenly;
	padding: 60px 20px 70px 20px;
}
.start-images img {
	width: 30%;
	max-height: 400px;
	max-width: 270px;
	object-fit: cover;
	overflow: hidden;
	transition: transform .4s;
}
.start-images img:hover {
	transform: scale(1.05);
	transform-origin: 50% 50%;
}
.soft-mask {
  border-radius: 35px;
  display: block;
  width: 400px;
  height: auto;
  object-fit: cover;
  
  /* fade all four edges with a rectangular gradient mask */
  -webkit-mask-image: 
    linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  mask-image: 
    linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-composite: intersect;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

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

	.soft-mask {
		border-radius: 10px;
	}
}	
		





/********************************************/
/*              EINLEITUNGSTEXT             */
/********************************************/		
		
.intro {
	width: 100%;
	background: mistyrose;
}
.intro div {
	width: 80%;
	margin: 0 auto;
}
.intro2 {
	width: 100%;
	background: #F2F2F2;
	padding: 60px 0;
}
.intro2 div {
	width: 75%;
	margin: 0 auto;
	text-align: center;
}


.border-fade {
	padding: 100px 100px;
	border-style: solid;
	border-width: 3px 0 0;
	border-image: linear-gradient(
		to right,
		transparent,
		#DCA1A1,
		transparent
	) 1;
}


@media screen and (max-width: 1001px) {
	.no-top-padding {
		padding-top: 0 !important;
	}
	.no-bottom-padding {
		padding-bottom: 40px !important;
	}
	.border-fade {
		padding: 60px 20px;
		margin-top: 0;
	}
	.intro2 .border-fade {
		padding: 90px 20px;
	}
}


h1.w3-center {
	font-size: 1.4em;
}

.w3-container {
	display: block;
	width: 100%;
	padding: 60px 0;
}
.w3-container:last-child {
	padding: 0;
}
.w3-row-padding {
	display: flex;
	justify-content: space-evenly;
}
.w3-quarter {
	padding: 0 8px;
	width: calc(22.9999% - 16px);
}
.w3-center {
	text-align: center;
}
.w3-jumbo {
	font-size: 64px !important;
}
.w3-large {
	font-size: 1.3em;
}
.w3-xlarge {
	font-size: 1.5em;
}

.accent-color {
	color: #DCA1A1;
}

@media screen and (max-width: 1001px) {	
	.w3-row-padding {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
	.w3-quarter {
		padding: 36px 8px;
		width: calc(48.9999% - 16px);
	}		
}
		
		
		
.outro {
	background-color: mistyrose;
	padding: 60px 0 100px 0 !important;
}	
.w3-xxlarge {
	font-size: 2.5em;
}
		
		
	




/********************************************/
/*               GRÖßENAUSWAHL              */
/********************************************/	

h1.border-fade {
	width: 65%;
	margin: 0 auto;
	font-size: 1.15em;
}
.wrapper-sizelinks {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	width: 80%;
	margin: 0 auto;
	padding-bottom: 140px;
}
.wrapper-sizelinks a {
	text-decoration: none;
}
.box {
	width: 200px;
	height: 100px;
	padding: 40px;
	background: mistyrose;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.box span {
	font-size: 1.2em;
	font-weight: bold;
	color: #555;
	transition: transform 0.3s ease;
	display: inline-block;
}
.box:hover span {
	transform: scale(1.2); 
}



	
		
		
/********************************************/
/*                   FOOTER                 */
/********************************************/	

footer {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  background: #453E3D;
  color: #F3F3F3;
  display: grid;
  place-items: center;
  padding: 50px 0 0 0;
}
footer .w3-center {
	width: 100%;
	font-size: .8em;
}
.no {
	display: none;
}
.copyright {
	margin-top: 50px;
	width: 100%;
	display: block;
	background-color: #282423;
	text-align: center;
	font-size: .75em;
	padding: 8px 0;
}