html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button{
    border: 0 none;
    font: inherit;
    margin: 0px;
    padding: 0px;
	font-size:100%;
	font-family: myFont;
	list-style-type: none;


}
		
	@font-face {  
		font-family: myFont;
	    src: url('../fonts/SourceSans3-VariableFont_wght.ttf') format('truetype');
}			

	@font-face {  
		font-family: mylogoFont;
	    src: url('../fonts/Montana.otf') format('opentype');
}			

		
		
body {
    background-color: #111;
    text-align: center;
    font-family: 'Source Sans Pro', sans-serif; /* Fallback-Schriftart hinzufügen */
        }
		

#preheader {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
	line-height: 100%;
    background-color: #222;
	margin: 0px;
	padding: 0px 20px;
}

#preheader ul li{
	display: inline-block;
	padding: 1px 15px 7px 15px;
}

#preheader ul li a{
	color: #777;
}	

#preheader ul li a:hover{
	color: white;
}	

.whatsapp_icon{
	width: 20px; 
	height: auto; 
	position: relative; 
	top:5px; 
	left:7px;
}

header{
	display: flex;
	flex-direction: column;
	align-content: center; /* Centers the content vertically in the grid */
	justify-items: center; /* Centers the grid items horizontally */
	align-items: center; /* Centers items in each row vertically */
	background-color: #fff;
	padding: 10px 100px 15px 100px;
}
.logo_container{
	display: flex;
	position: relative;
	top:-25px;
	flex-direction: column;
	align-content: center; /* Centers the content vertically in the grid */
	background-color: none;

}
.logo{
	width: auto;
	height: 100px;
	margin: 10px 0px 0px 0px;
	padding: 0px;
}
.logoschrift{
	position: relative;
	font-family: mylogoFont;
	font-size: 3em;
	line-height: 100%;
	margin: 0px;
	padding: 0px;
/*			color: #2f83d0;*/
	color: white;
}
.logoschrift_subline {
	color: white;
	font-weight: 400;
}



nav{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
    background-color: #222;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 130%;
	height: 70px;
	margin: 0px;
	padding: 0px;
}

nav ul li{
	display: inline-block;
	margin: 0px 12px 0px 12px;
}

nav ul li a{
	color: white;
	text-decoration: none;
	transition: 0.3s;
}

nav ul li a:hover{
	color: rgba(0,85,174,1.0);
	background-color: white;
	border-radius: 25px;
	padding: 4px 15px 4px 15px;}


a{
	color: rgba(0,85,174,1);
	text-decoration: none;
	transition: 0.3s;
}
a:hover{
	color: white;			
	text-decoration: none;
}

.active{
	color: rgba(0,85,174,1.0);
	background-color: white;
	border-radius: 25px;
	padding: 4px 15px 4px 15px;
}

#startheader{
	display: flex;
	align-items:center;
	justify-content: center;
	width: 100%;
	height: 70vh;
	background-blend-mode: multiply;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top center;
	background-size: cover;
	padding: 0;
	margin: 0;
}

 .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 60px;
    padding: 40px;
    align-content: center; /* Centers the content vertically in the grid */
    justify-items: center; /* Centers the grid items horizontally */
    align-items: center; /* Centers items in each row vertically */
}

.gallery img {
    width: 100%;
    height: auto;
    border-radius: 0px;
    cursor: pointer; /* Indicates that the image is clickable */
    object-fit: contain; /* Ensures images fit without distortion */
    max-height: 400px;
}

		
/* Lightbox Styles */
.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 100;
}
.lightbox img {
	max-width: 90%;
	max-height: 47vw;
	border-radius: 3px;
	box-shadow: 0px 3px 60px 50px rgba(0,0,0,0.5);
}

#filename{
	display: block;
	max-width: 90%;
	text-align: center;
	font-size: 1.2em;
	font-weight: 400;
	margin: 7px auto;
	align-self: auto;
	height: 50px;
	color: dimgray;
	background-color: rgba(255, 255, 255, 0);
}


.arrow {
	position: absolute;
	top: 49%;
	transform: translateY(-95%);
	font-size: 50px;
	color: white;
	cursor: pointer;
	user-select: none; /* Verhindert, dass der Text ausgewählt wird */
	z-index: 100; /* Stellt sicher, dass die Pfeile über dem Bild sichtbar sind */
	opacity:0.5;
	transition: 0.3s;
}
.arrow:hover{
	opacity:1;
}
.left {
	left: 10%; /* Positionierung des linken Pfeils */
}
.right {
	right: 10%; /* Positionierung des rechten Pfeils */
}

.btn_close {
	position: fixed;
	top: 5%;
	right:5%;            
	font-size: 40px;
	line-height: 54px;
	padding: 0px 0px 0px 0px;
	width: 60px;
	height: 60px;
	color: white;
	background-color: rgba(255,255,255,0.3);
	border-radius: 50%;
	cursor: pointer;
	user-select: none; /* Verhindert, dass der Text ausgewählt wird */
	z-index: 100; /* Stellt sicher, dass die Pfeile über dem Bild sichtbar sind */
	transition: 0.3s;
}
	.btn_close:hover{
	background-color: rgba(192,0,3,1.0);
}

#btn_to_top{
	display: none; /* Hidden by default */
 	position: fixed;
	bottom: 5%;
	right:5%;            
	font-size: 60px;
	line-height: 90%;
	padding: 0px 0px 0px 0px;
	width: 60px;
	height: 60px;
	color: white;
	background-color: rgba(0,85,174,1.0);
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	border-radius: 50%;
	cursor: pointer;
	user-select: none; /* Verhindert, dass der Text ausgewählt wird */
	z-index: 99; /* Stellt sicher, dass die Pfeile über dem Bild sichtbar sind */
	transition: 0.3s;
}

#btn_to_top:hover{
	color: rgba(0,85,174,1.0);
	background-color: white;
}		

.btn_1 {
	display:inline-block;
	transition: all 0.4s ease;
	font-size:1.3em;
	color: white;
	background-color: rgba(0,85,174,1);
	border-radius:40px;
	padding:13px 33px 15px;
	margin:0px 0px 30px;
	text-decoration:none;
	text-transform:none;
	letter-spacing:1px;
	font-weight: 400;
}

a.btn_1:hover{
	color: rgba(0,85,174,1);
	background-color: white;

}



h1 {
	color: white;
	font-size: 2.4em;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1px;
	margin: 20px 0px 15px 0px;
	padding: 0px;

}
h2 {
	color: white;
	font-size: 1.7em;
	font-weight: 400;
	line-height: 100%;
	text-transform: uppercase;
	font-style: italic;
	letter-spacing: 1px;
	margin: 0px 0px 7px 0px;
	padding: 0px;

}
h3 {
	color: dimgray;
	font-size: 2em;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1px;
	margin: 15px 0px 15px 0px;
	padding: 0px;
}
h4 {
	color: dimgray;
	font-size: 1.6em;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1px;
	margin: 15px 0px 15px 0px;
	padding: 0px;
}
p {
	color: dimgray;
	font-size: 1.3em;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1px;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}


.content_wrapper{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
	height: 100%;
	padding: 70px 10px 100px;
}
.content{
	display:flex;
	flex-direction: column;
	align-content: flex-start;
	text-align: center;
	margin: 0px 100px;
}

.left_aligned{
	text-align: left;
}
.center_aligned{
	text-align: center;
}

.spacer1 {
	height: 100px;
}

.space_before1{
	margin-top:10px;
}

.space_before2{
	margin-top:20px;
}

.space_before3{
	margin-top:30px;
}

.space_before4{
	margin-top:40px;
}

.space_before5{
	margin-top:50px;
}

.space_before6{
	margin-top:60px;
}

.space_before7{
	margin-top:70px;
}

.space_before10{
	margin-top:100px;
}



.space_after1{
	margin-bottom:10px;
}

.space_after2{
	margin-bottom:20px;
}

.space_after3{
	margin-bottom:30px;
}

.space_after4{
	margin-bottom:40px;
}

.space_after5{
	margin-bottom:50px;
}

.space_after6{
	margin-bottom:60px;
}

.space_after7{
	margin-bottom:70px;
}

.space_after10{
	margin-bottom:100px;
}


.accentcolor{
	color: rgba(0,85,174,1.0);
}

.white{
	color: white;
}

.bg_large{
	background-color: rgba(0, 0, 0, 0.3);
}

.bg_dark{
	background-color: rgba(255, 255, 255, 0.05);
}

.dropshadow{
	filter: drop-shadow(1px 2px 5px rgba(0, 0, 0, 0.4));
}



#info_header{
	padding: 140px 0px 150px 0px;
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url("../headerbilder/bild_10.jpeg") no-repeat fixed center;
	background-size: cover;
	height: 30vh;
}

.row{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.preisbox{
	display:flex;
	flex-direction: column;
	background-color: #222;
	border-radius: 5px;
	padding: 15px 50px;
	margin: 20px;
	font-size: 1em;
}
.preisbox h3{
	font-size: 2.4em;
	line-height: 140%;
	font-weight: 600;
	margin: 0px;
	padding: 0px;
	color: rgba(0,85,174,1.0);
}
.preisbox h4{
	font-size: 1.4em;
	line-height: 140%;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
	color: dimgray;
}
.preisbox p{
	font-size: 2em;
	line-height: 180%;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
	color: white;
}

		
footer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
    background-color: none;
	font-size: 2em;
	font-weight: 400;
	line-height: 130%;
	height: 200px;
	margin: 0px;
	padding: 0px;
}		
footer p {
	color: dimgray;
	font-size: 0.5em;
	font-weight: 400;
	line-height: 130%;
	letter-spacing: 1px;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}