/*Rahmen*/
html, body {
	margin:				0;
	margin-bottom:		1px;
	padding:			0;
}
body { margin: 			0; padding:	0; font-family: "Segoe UI", Arial, sans-serif; font-size: 1em; line-height: 1.5em; background-color: #eeeeee; 
    background-repeat: no-repeat; background-position: 0 0; }

/* --- Allgemeines Design --- */

#wrap {
	margin: 			0 auto;
	padding: 			0;
	padding-top: 		0;
	height: 			100%;
	width: 				100%;
	max-width:          100%;
	text-align: 		center;
	background-color: 	#ccc;
	background-color: 	rgba(0,0,0,0);
	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 	0px 0px 5px #999;
	box-shadow: 		0px 0px 0px #999;
	z-index: 0;
}
#wrap.fotoPreview {
	width: 1200px;
}

@media screen and (min-width: 620px) {
	#wrap, #wrap.fotoPreview {
		width: 620px;
	}
}
@media screen and (min-width: 760px) {
	#wrap, #wrap.fotoPreview {
		width: 760px;
	}
}
@media screen and (min-width: 980px) {
	#wrap {
		width: 980px;
	}
	#wrap.fotoPreview {
		width: 100%;
	}
}


/* 1. ALLE DREI BOXEN KOMPLETT ZENTRIEREN */
#footLinks .box1, 
#footLinks .box2, 
#footLinks .box3 {
    text-align: center !important; /* Zentriert Überschriften, Listen und Fließtext */
}

/* 2. DIE ÜBERSCHRIFTEN (Weiß, unterstrichen, zentriert) */
footer h3.footBoxHead,
footer h4.footBoxHead {
    font-family: 'Raleway', sans-serif;
    font-weight: 150 !important;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center !important; /* Garantiert die Mitte für die Überschriften */
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
    padding-bottom: 1px;
}

/* 3. DIE LISTEN (Absolut zentriert, kein Versatz nach rechts) */
#footLinks ul {
    display: block;               /* Nutzt die volle Breite für die Zentrierung */
    text-align: center !important; /* Zentriert jeden Link einzeln in der Mitte */
    padding: 0 !important;        /* Löscht den alten Browser-Einzug radikal */
    margin: 5px 0 8px 0 !important; /* 5px Abstand nach oben zur Überschrift, 8px nach unten */
    list-style: none !important;  /* Keine Punkte */
    list-style-type: none !important;
}

/* 4. DIE EINZELNEN LISTENPUNKTE */
#footLinks ul li {
    padding: 0 !important;
    margin: 0 0 6px 0 !important;  /* 6px Abstand zwischen den einzelnen Zeilen */
    text-align: center !important; /* Sichert die Zentrierung der Zeile */
}

/* 5. DIE KONTAKT-BOX (Box 2) EBENFALLS ZENTRIEREN */
#footLinks .contact-details,
#footLinks .contact-details p {
    margin-top: 5px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    text-align: center !important; /* Zentriert Name, Beruf, E-Mail und Webseite */
}



/*Bannerbild*/

*[class^="prlx"] {
  	position: 			relative;
  	width: 				100%;
  	height: 			auto;
	margin-top: 		085px; /*Abstand des Bildes zum weißen Bereich darüber*/
	
}
.prlx-1 img { 
  	width:				100%;
	height:				25vh;
	object-fit:         cover;
}

@media screen and (min-width: 620px) {
	*[class^="prlx"] { margin-top: 	95px; }
	.prlx-1 img { 
  	width:				100%;
	height:				20vh;
	object-fit:         cover;
}

}
@media screen and (min-width: 760px) {
	*[class^="prlx"] {
		margin-top: 	100px;
	}
	.prlx-1 img { 
  	width:				100%;
	height:				25vh;
	object-fit:         cover;
}

}
@media screen and (min-width: 980px) {
	*[class^="prlx"] {
		margin-top: 	140px;
	}
	.prlx-1 img { 
  	width:				100%;
	height:				25vh;
	object-fit:         cover;
}

}
.prlx-1 { 
  	z-index: 			10;
}
.section-one {
	overflow: 			hidden;
	
}


.section-two { overflow: visible; position: relative; z-index: 135; }
#headline {
	margin: 			0 auto;
	width:				auto;
	padding:			0;
	z-index: 			-504;
	padding:			0 10px;
}

@media screen and (min-width: 620px) {
	#headline {
		padding:		0 30px;
	}
}
#text { margin: 0 auto; width:	100%; padding:	0; z-index: -505; }


/*Position und Größe des Logos in Abhängigkeit vom TopNavi - erst allgemein Smartphone, dann die media screens*/
#logo {
	margin: 0px 0px 0px 0px;
	width: 100px;
}
#logo img {
	position: relative;
	left: 0%;
	width: 80%;
	right: auto;
}
@media screen and (min-width: 620px) {
	#logo     { margin:			0px 10px 5px 10px; 
	            width:			100%; 
	            height:			auto; 
	            float: 			none; }
	#logo img { position: absolute; left: -230%; width: 80%; }
}
@media screen and (min-width: 760px) {
	#logo {margin:			0px 10px 5px 15px;
		   width:			100px;
		   height:			auto;
		   float: 			none;}
	#logo img { position: absolute; left: -260%; width: 90%; }
}

@media screen and (min-width: 980px) {
	#logo {margin:			0px 10px 5px 20px;
	       position: absolute;
	       top: 4px;
		   width:			140px;
		   height:			auto;
		   float: 			none;}
    #logo img { position: absolute; top: 4px; left: -360%; width: 120%; }
}

#logo a, .nav-collapse a {
    pointer-events: auto; /* Aber die echten Links im Menü bleiben klickbar! */
}

#topnavi {
	height: 85px;
	width: 100%;
	position: fixed;
	background-color: white;
	pointer-events: auto;
	top: 50;
	left: 0;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	z-index: 140;
}
@media screen and (min-width: 620px) {
	#topnavi { width: 100%; height: 		95px; }
}
@media screen and (min-width: 760px) {
	#topnavi { width: 100%; height: 		100px; }
}
@media screen and (min-width: 980px) {
	#topnavi {
	width: 100%;
	height: 140px;
}
}
#navi-wrap {
	width: 98%;
	position: relative;
	z-index: 150;
	}
@media screen and (min-width: 620px) {
	#navi-wrap {
		width: 			620px;
		left:			50%;
		margin-left:	-330px;
	}
}
@media screen and (min-width: 760px) {
	#navi-wrap {
		width: 			760px;
		left:			50%;		
		margin-left:	-440px;
	}
}
@media screen and (min-width: 980px) {
	#navi-wrap {
	width: 980px;
	left: 50%;
	margin-left: -560px;
	padding-top: 0px;
}
}

#galerie-wrapper {
 display: flex;          /* Aktiviert Flexbox */
    flex-wrap: wrap;        /* Erlaubt Zeilenumbruch */
    justify-content: center; /* Zentriert die Bilder horizontal */
    gap: 10px;              /* Abstand zwischen den Bildern */
    width: 100%;
    margin: 20px 0;
}

.galerieBild {
    float: none; 
    display: block;
    text-align:center;
    width:150px;
}

.container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
}

.colLeft { position: relative; width: 100%; float : none; padding:0px 10px; box-sizing: border-box; display: block;}
.colRight { text-align: center; position: relative; left: -1%; width: 100%; float :none; padding:0px 10px; box-sizing: border-box; display: block; }

.colGesamt1 {
    display: block;
    width: 100%;
    padding:5px 20px;
	font-weight: 250;
	box-sizing: border-box;
	
}
.colGesamt2 {
   	width: 100%;
    float:left;
    padding:5px 10px;
	background-color: #555555;
	font-weight: 250;
}

@media screen and (min-width: 620px) {
	.colGesamt1 {
	    float: none;
	    width: 100%;
	    margin: 0 auto;
	    padding:5px 30px;
		font-weight: 250;
}
	.colGesamt2 { 
	    width: 100%; 
	    float:left; 
	    padding:5px 30px; 
	    background-color: #555555; 
	    font-weight: 250; 
	    text-align: center; 
	    right: 50%; 
}
	.colLeft { 
	   text-align: center; 
	   float:none; 
	   padding:15px 30px; 
	   width: 100% !important;
	   box-sizing: border-box;
}
	.colRight { 
	   text-align: center; 
	   right: 0 auto; 
	   float:none; 
	   padding:25px 0; 
	   width: 100% !important;
	   box-sizing: border-box;
}
    .colGesamt2 p {
	   color: #FFFFFF;
}
    .colGesamt2 h3 {
	   color: #FFFFFF;
	   font-weight: 200;
}
}
@media screen and (min-width: 760px) {
	.colGesamt1 {
	   display: block;
	   width: 100%;
 	   padding:25px 20px;
	}
	.colGesamt2 {
    	padding:25px 30px;
	}
	.colLeft {
	    width: 100%;
	    float: none;
	    padding:20px 30px;
	    width: 100% !important;
	    box-sizing: border-box;

	}
	.colRight {
   		width: 100%;
  	  	float:none;
    	padding:25px 0;
    	width: 100% !important;
	    box-sizing: border-box;

	}
}	

@media screen and (min-width: 980px) {
	.colGesamt1 {
	   display: flex;
  	   width: 100%;
  	   justify-content: space-between;
 	   padding:25px 30px;
 	  	}
	.colGesamt2 {
    	padding:25px 30px;
	}
	.colLeft {
	    width: 70% !important;
	    float: none;
	    padding:25px 30px;
	}
	.colRight {
   		width: 25% !important;
  	  	float: none;
    	padding:25px 0;
	}
	.linieLinks {
       border-left: 1px solid #ccc;
       padding-left: 10px;
       margin-bottom: 30px;
   }
}	

br.next {
    clear: both;
}
.textHeadline {
	background-color:	#555555;
	padding:			0 5px;
	color: 				#FFFFFF;
}

#footLinks {
	padding: 5px 0px;
	width: 100%;
	margin: 0 auto 20px auto;
	z-index: -505;
	background-color: gray;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;   /* ersetzt ALLE margins zwischen Boxen */
}

@media screen and (min-width: 620px) {
    #footLinks {
        padding:        5px 0px;
    }
}

/* Basis: Mobile */
#footLinks .footBox {
	width: 100%;
	float: none; /* wichtig */;
	margin: 0;
    border: 0;
	padding: 0;
	text-align: center;
}

/* Ab 620px */
@media screen and (min-width: 620px) {
    #footLinks .footBox {
        width:          264px;
        font-size:      0.9em;
    }
}

/* Ab 760px */
@media screen and (min-width: 760px) {
    #footLinks .footBox {
        width:          225px;
    }
}

/* Ab 980px */
@media screen and (min-width: 980px) {
    #footLinks .footBox {
        width:          280px;
    }
}#bottom {
	display:			none;
	margin: 			0 auto;
	width:				100%;
	padding:			10px 0;
	z-index: 			-505;
	background-color:	#111;
}  
@media screen and (min-width: 620px) {
	#bottom {
		display:			block;
	}  
}

/* Schriften */

.first {
	margin-top: 		0px;
}
.orangeFett {
	color: 				#b45f06;
	font-weight: 		200;
}
.orange {
	color: 				#b45f06;
	font-weight: 		100;
}
p {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color:				#3b3b3b;
}
h1, .likeH1 {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1.6em;
	line-height:		1.3em;
	color:				gray;
	margin:				30px 0 0;
	font-weight:		200;
	text-transform:		uppercase;
}
h2 {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1.4em;
	line-height:		1.3em;
	color:				#333333;
	font-weight:		200;
	margin:				2px 0;
}
h3, h3.slogan {
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 1.3em;
	line-height: 1.2em;
	color: #222222;
	font-weight: 150;
	padding: 0;
}
h4 {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			13px;
	line-height:		1.0em;
	color:				#222222;
	font-weight:		300;
	margin:				0;
}
h3.slogan { margin:				0 0 10px; }
@media screen and (min-width: 620px) {
	h1, .likeH1 {
		font-size:			1.6em;
		line-height:		1.3em;
	}
	h2 {
		font-size:			1.4em;
		line-height:		1.3em;
	}
	h3, h3.slogan {
		font-size:			1.3em;
		line-height:		1em;
	}
}
@media screen and (min-width: 760px) {
	h1, .likeH1 {
		font-size:			2.0em;
		line-height:		1.2em;
	}
	h2 {
		font-size:			1.6em;
		line-height:		1.3em;
	}
	h3, h3.slogan {
		font-size:			1.3em;
		line-height:		1.2em;
	}
}

ul { 
	margin-left: 		0px; 
	padding: 			0px;
}
li { 
	margin-left:		16px;
	margin-top:			0px;
	padding-left: 		0px;
	color:	 			#222222;
	font-family:		"Segoe UI", Arial, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color:				#333;
}

/* Links */

/* Der rote Hintergrund des YouTube-Buttons */
.play-button-css {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 50px;
    background-color: #FF0000; /* YouTube Rot */
    border-radius: 12px;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Das weiße Dreieck (Play-Symbol) */
.play-button-css::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 55%; /* Leicht nach rechts versetzt für optische Mitte */
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #ffffff;
}

/* Hover-Effekt für PC */
.video-container:hover .play-button-css {
    background-color: #cc0000;
    transform: translate(-50%, -50%) scale(1.1);
}

a:link {				
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color:				#b45f06;
	font-weight:		200;
	text-decoration: 	none;
}
a:visited {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color: 				#b45f06; 
	text-decoration: 	none;
}
a:active {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color: 				#b45f06; 
	text-decoration: 	none;
}
a:hover {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size:			1em;
	line-height:		1.5em;
	color: 				#ff7f00; 
	text-decoration: 	none;
	background-color:   transparent;
}

#footLinks a:link {				
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color:				#FFFFFF;
	text-decoration: 	none;
	background-color:   gray;
	font-weight:		100;

}
#footLinks a:visited {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color: 				#FFFFFF; 
	text-decoration: 	none;
	background-color:   gray;
}
#footLinks a:active {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color: 				#FFFFFF; 
	text-decoration: 	none;
	background-color:   gray;
}
#footLinks a:hover {
	font-family: 		"Trebuchet MS", Helvetica, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color: 				silver; 
	text-decoration: 	none;
	background-color:   gray;
}
#footLinks p.footBoxHead {
	font-weight:		300;
	color:				#FFFFFF;
	font-size:			1.2em;
	margin: 			0 0 5px 0;
	border-bottom:		1px solid #FFF;
}
#footLinks p, #footLinks .weisstext {
	font-family: 		"Segoe UI", Arial, sans-serif;
	font-size: 			1em; 
	line-height:		1.5em; 
	color:				#FFFFFF;
	margin: 0;
}
#footLinks .grauText {
	color: 				#CCCCCC;
}
#footLinks ul {
	padding: 			0; 
	margin: 			0;
	border: 			none;
}
}

/* Forms */



div.galerieBild {
	margin: 0 10px 5px 0;
	width: 100%;
	font-size: 0.8em;
	line-height: 1.1em;
}
div.galerieBild:focus, div.galerieBild:hover {
background-color: #FFF;
}
div.galerieBild img {
	width: 150px;
	height: 150px;
	margin: 15;
	object-fit: cover;
}
div.galerieBild img:hover {
	-webkit-filter: brightness(1.2) contrast(1.1);
	filter: brightness(1.2) contrast(1.1);
	transition: .5s;
}
.fotoPreviewIMG {
	width: 100%
}
div.galerieBild img.status {
	width:2px;
	height: 2px;
}
div.galerieBild span.status0 {
	padding: 0 2px;
	margin: 2px;
	background: #CC3300;
	color: #FFF;	
}
div.galerieBild span.status1 {
	padding: 0 2px;
	margin: 2px;
	background: #FFCC00;
	color: #000;	
}
div.galerieBild span.status2 {
	padding: 0 2px;
	margin: 2px;
	background: #390;
	color: #FFF;
}
.bildTitel{
    margin-top:2px;
    font-size:0.9em;
    font-family: 		"Segoe UI", Arial, sans-serif;
	line-height:		1.5em;
	color: 				#2b2b2b; 
	text-decoration: 	none;
	background-color:   transparent;
	font-weight:		200;


}


@media screen and (min-width: 620px) {
	div.galerieBild img {
		width: 120px;
		height: 120px;
		object-fit: cover;
	}
	div.galerieBild {
		margin: 0 6px 6px 0;
		float: none;
	}
}
@media screen and (min-width: 760px) {
	div.galerieBild img {
		width: 150px;
		height: 150px;
		object-fit: cover;
	}
	div.galerieBild {
		margin: 0 6px 6px 0;
	}
}
@media screen and (min-width: 980px) {
	div.galerieBild img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	div.galerieBild {
		margin: 0 26px 11px 0;
	}
}
@media screen and (min-width: 620px) {
	div.halb {
		width: 50%;
		float: left;
	}
}

div.colGesamt2 div.demoInfotext, div.colGesamt2 .blackKlein {
	color: #FFFFFF;
}
div.colGesamt2 a {
	color: #FFFFFF;
	background-color:   #333333;
}

.toggle_container {
	padding: 10;
	width: 100%;
	margin: 10;
	background: none;
	display: none;
}

header, nav, .nav-collapse {
	margin: 0px 0 0 0;
	margin-top: 0px;
	padding: 0px !important;
	top: 0 !important;
}
/* Schiebt nur die Menüpunkte nach unten
/* 1. Standard (Smartphone / kleinste Ansicht) - Leiste ist 85px hoch */
.nav-collapse ul {
    margin-top: 0px !important; 
}

/* 2. Ab 620px Breite - Leiste ist 95px hoch */
@media screen and (min-width: 620px) {
    .nav-collapse ul {
        margin-top: 50px !important;
    }
}

/* 3. Ab 760px Breite - Leiste ist 100px hoch */
@media screen and (min-width: 760px) {
    .nav-collapse ul {
        margin-top: 55px !important;
    }
}

/* 4. Ab 980px Breite - Leiste ist 140px hoch */
@media screen and (min-width: 980px) {
    .nav-collapse ul {
        margin-top: 90px !important; /* Deutlich mehr Abstand, da die Leiste hier 140px hoch ist */
    }
    #logo {
        top: 4px !important; /* Logo bleibt oben links */
    }
}

body.datenschutz .colgesamt {
    display: flex; /* sicherstellen, dass der Container flex ist */
}

body.datenschutz .colLeft {
    flex-basis: 99%;  /* nimmt 99% der Breite ein */
    flex-grow: 0;     /* wächst nicht über 99% hinaus */
}

body.datenschutz .colRight {
    flex-basis: 1%;   /* nimmt 1% der Breite ein */
    flex-grow: 0;     /* wächst nicht */
}

.fullwidth {
    width: 100vw;              /* volle Viewport-Breite */
    margin-left: calc(-50vw + 50%); /* zentrierten Container „aufbrechen“ */
}
body {
    font-family: 'Raleway', sans-serif !important;
}