/* 
hellbeige:#f7f3ea
gold:#d7bc73
petrol:#52788f
*/



body {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;  
  font-size:19px;
}

p  {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;  
  font-size:16px;
  margin-top:20px;
}
@media (max-width: 1023px) {
	p {
  font-size:14px;
	}	
}

li  {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;  
  font-size:16px;
}
@media (max-width: 1023px) {
	li {
  font-size:14px;
	}	
}




a {
  color:black;
}
a:hover {
  color :#52788f;
}





h1,
h3,
h4,
h5,
h6 {
  	font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  	font-weight:400;
	color:#000000;
  }

h1 {
 	 font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 	 font-weight:400;
 	 font-size:2.7em;
}

@media (max-width: 1023px) {
	h1 {
 	 font-size:2.3em;
	}	
}


h2 {
 	 font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 	 margin-bottom:18px;
 	 font-size:2.0em;
}
@media (max-width: 1023px) {
	h2 {
 	 font-size:1.3em;
	}	
}

h3 {
 	 font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
 	 margin-top:30px;
 	 margin-bottom:20px;
}





.open-sans {
 	 font-family:'open sans' sans-serif;
}



.titelbild {
	width:90%;
	height:auto;
}
@media (max-width: 1023px) {
.titelbild {
	width:60%;
	height:auto;
	}
}
@media (max-width: 995px) {
.titelbild {
	width:40%;
	height:auto;
	}
}

/* Margin unter Breakpoint seitlich 0px Rand und kein Überstand im Container */
.kasten-weiss {
	background-color:white; 
	margin-bottom:30px;
}	
/* schaltet über Breakpoint auf 5px seitlich um */
@media (min-width: 992px) {
  .kasten-weiss {
  }
}

.kasten-weiss a {
	color:black; 
	text-decoration:none
}	
.kasten-weiss a:hover {
	color:#6baff3; 
	text-decoration:none
}	
/* Margin unter Breakpoint seitlich 0px Rand und kein Überstand im Container */
.kasten-beige {
	background-color:#f7f3ea; 
	margin-bottom:30px;
}	
/* schaltet über Breakpoint auf 5px seitlich um */
@media (min-width: 992px) {
  .kasten-beige {
  }
}



/* Bild oben */




.hintergrund-bild-start-1 {
	background: url('../bilder/schottland/schottland-hintergrund1.jpg') no-repeat top center;
	background-size: cover;
	min-width:100%;
	min-width:100%;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	-khtml-background-size: cover;
  }
@media (max-width: 1921px) {
.hintergrund-bild-start-1 {
	width: 100vw;
	height:100vh;
  }
}
@media (max-width: 1200px) {
.hintergrund-bild-start-1 {
	width: 100vw;
	height:100vh;
  }
}


.schriftverlauf {
	background-image:linear-gradient(to right, #cc0000, #ffbc47);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}

.text-weiss {
    color:#ffffff;   
    font-weight:500;  
}


/* Text zentriert auf Bild oben */

.text-auf-bild-container {
    margin:50px 20px; 
    text-align: center;
}


.text-auf-bild-inhalt{
	padding: 0px;
	/* Container horizontal mittig platzieren */
    margin: auto;
}

/*
.text-auf-bild-gross-start {
   font-family: 'bree serif', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;
	line-height:100%;
	font-size:90px;
	font-weight:400;
  	margin: 200px 0px 40px 0px;
  	padding: 0px;
}
.text-auf-bild-klein-start {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;
	font-size:30px;
	font-weight:400;
  	margin: 0px 0px 180px 0px;
  	padding:0px
}

@media (max-width: 1023px) {
	.text-auf-bild-gross-start {
		font-size:60px;
		margin: 40px 0px 40px 0px;
	}	
}

 */
.text-with-shadow {
	color:white;
  	text-shadow:
    0 0 0.4em #444;
}




.text-auf-bild-gross {
   font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;
	line-height:120%;
	font-size:80px;
	font-weight:400;
  	padding: 0px;
}
.text-auf-bild-klein {
  font-family: 'bree serif', 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#ffffff;
	font-size:40px;
	font-weight:400;
  	margin: 0px 0px 60px 0px;
  	padding:0px;
}
@media (max-width: 1023px) {
	.text-auf-bild-gross {
		font-size:50px;
		margin: 0px 0px 30px 0px;

	}	
	.text-auf-bild-klein {
		font-size:25px;
		margin: 0px 0px 30px 0px;

	}	
}

.formulartext  {
  font-family: 'open sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:16px;
}
@media (max-width: 1023px) {
	.formulartext {
  font-size:14px;
	}	
}







.textspalte-links {
  	margin-right:10px;
  	width:45%
}
@media (max-width: 1023px) {
	.textspalte-links {
  	margin-right:0px;
  	margin-left:0px;
  	width:100%;
  	margin-bottom:10px
  	}	
}

.textspalte-rechts {
  	margin-left:10px;
  	width:45%
}
@media (max-width: 1023px) {
	.textspalte-rechts {
  	margin-right:0px;
  	margin-left:0px;
  	width:100%
	}	
}





.feedbackbilder {
  background-color: #717171;
  height:200px;
  width:200px;
  border-radius:100px;
  margin-bottom:30px;
}



.gradient-animation-blau-rot   {
    background: linear-gradient(275deg, #0091ff, #cc0200);
    background-size: 400% 400%;

    -webkit-animation: blau-rot 9s ease infinite;
    -moz-animation: blau-rot 9s ease infinite;
    -o-animation: blau-rot 9s ease infinite;
    animation: blau-rot 9s ease infinite;
}

@-webkit-keyframes blau-rot {
    0%{background-position:0% 53%}
    50%{background-position:100% 48%}
    100%{background-position:0% 53%}
}
@-moz-keyframes blau-rot {
    0%{background-position:0% 53%}
    50%{background-position:100% 48%}
    100%{background-position:0% 53%}
}
@-o-keyframes blau-rot {
    0%{background-position:0% 53%}
    50%{background-position:100% 48%}
    100%{background-position:0% 53%}
}
@keyframes blau-rot {
    0%{background-position:0% 53%}
    50%{background-position:100% 48%}
    100%{background-position:0% 53%}
}




.hintergrund-beige {
	background: #f7f3ea; 

}

.hintergrund-beige-animiert {
	background: #ffe28b; 
    background: linear-gradient(270deg, #f37007, #ffdd8b, #ffa200);
    background-size: 600% 600%;

    -webkit-animation: verlauf-orange 30s ease infinite;
    -moz-animation: verlauf-orange 30s ease infinite;
    -o-animation: verlauf-orange 30s ease infinite;
    animation: verlauf-orange 30s ease infinite;
}

@-webkit-keyframes verlauf-orange {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes verlauf-orange {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes verlauf-orange {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes verlauf-orange {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}



.blauverlauf-zu-rot {
	background: #e8f2fe;  /* Fallback für alte Browser - hellblau #6baff3 */ 
    background-image: linear-gradient(to left, #d30203, #df0045, #d1007f, #a000b7, #0045e0);	}

.blauverlauf-hell {
	background: #0091ff;  /* Fallback für alte Browser - hellblau #6baff3  */
	background-image: linear-gradient(to right top, #0091ff, #3ca3ff, #60b5ff, #81c6fe, #a2d6fd);
   }
.blauverlauf-dunkel {
	background: #1E2C36;  /* Fallback für alte Browser - hellblau #6baff3  
    background-image: linear-gradient(to right top, #1e2c36, #293d4c, #345064, #40637c, #4c7696); */  }

.blau-rot-verlauf {
    background: #d30203;  /* Dunkelblau - Fallback für alte Browser */
 background-image: linear-gradient(to left, #d30203, #df0045, #d1007f, #a000b7, #0045e0);}


.aufblenden {
  animation-name: animate-pop;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
  animation-duration: 1.3s;
  animation-delay: 0.5s;
}
@keyframes animate-pop {
  0% {
    opacity: 0;
    transform: scale(0.5, 0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}

.rotiert {
  transition: transform 1.8s ease-in-out;
}
.rotiert:hover {
  transform: rotate(-10deg);
}

.bildgross {
	/* SCALE */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	/* VERZÖGERUNG */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.bildgross:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}






.icon {
	width:90px;
	height:90px;
	-webkit-transition-property: all; 
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-timing-function: ease; 
	margin:20px 0px;
}
.icon:hover {
	transform: scale(1.2);
 }

.btn-blau {
  --bs-btn-color:#fff;
  --bs-btn-bg: #52788f;
  --bs-btn-border-color: #52788f;
  --bs-btn-hover-color: #52788f;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #52788f;
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  margin-top:20px;
  margin-right:10px;
  font-weight:400;
  border:3px solid #52788f;  
  border-radius:50px;
}

.btn-weiss {
  --bs-btn-color:#52788f;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #fff;
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  margin-top:20px;
  margin-right:10px;
  font-weight:600;
  border:3px solid white;  
  border-radius:50px;
}

.btn-gold {
  --bs-btn-color:#fff;
  --bs-btn-bg: #d7bc73;
  --bs-btn-border-color: #d7bc73;
  --bs-btn-hover-color: #d7bc73;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: #d7bc73;
  font-size:1.1em;
  padding-left:20px;
  padding-right:20px;
  margin-top:20px;
  margin-right:10px;
  font-weight:400;
  border:3px solid #d7bc73;  
  border-radius:50px;
}


.referenzbilder {
 	margin:20px 0px;
 	-webkit-border-radius: 8px;
  	-moz-border-radius: 8px;
  	-khtml-border-radius: 8px;
  	border-radius: 8px;
  	-webkit-box-shadow: 0px 0px 8px #373737; 
	-moz-box-shadow: 0px 0px 8px #373737;  
	box-shadow: 0px 0px 8px #373737; 

 	}


#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  outline: none;
  cursor: pointer;
  padding: 5px;;
  border-radius:5px
}
#myBtn:hover {
  background-color: #ffffff;  
  border:2px solid white
}

.footer {
	background-color:#52788f;
    color:#974c10;
 }
.footer a {
    color:#ffffff;
 }
.footer a:hover {
    color:#d7bc73;
 }





/* Slideshow container */
.slideshow-container {
  position: relative;
  background: #ffffff;
}

/* Slides */
.mySlides {
  display: none;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 35px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color:#52788f;
  color: white;
}

/* The dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 20px;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #52788f;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.active, .dot:hover {
  background-color: #ffffff;
}

/* Add an italic font style to all quotes */
q {font-style: italic;}

/* Add a blue color to the author */
.author {
	color:#52788f; 
	font-weight:bold;
	margin-top:20px;
	}

.sliderbilder
 {
  background-color: #717171;
  height:200px;
  width:200px;
  border-radius:100px;
  margin-bottom:30px;
}