:root {
	/* Variablen */
	/* Farben */
	--mainTextColor: white;
	--darkTeal: #27555c;
	--lightTeal: #689598;
	--lighterTeal: #a7d3d5;
	--ueberschriftGelb: #f3eab8;
	--ueberschriftSattesGelb: #f2e182;
	--magic: #b075d9;
}

body {
	background-color: white;
	color: #333;
	font-size: 18px;
}

.flexslider { width: 99%; }

.fixiert {
   position:fixed;
   z-index:999;
}	

.naviFrame {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position:absolute;
	transform-origin: left top 0;
}

.obenRechts { 
	top: 15px; right: 20px; position:fixed; z-index:999;
}

.credit { padding-bottom: 9px; padding-top: 12px; margin-left: 0px; margin-right: 0px; background-color: rgba(0, 0, 0, 0.5); } /* Footer */
#myFooter { color: #FFFFFF; font-size: 0.8em; text-align: center; font-family: Arial, sans-serif; }


.bodyBG {
	background: url(../images/bodyBG.jpg) no-repeat center center fixed; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	overflow-x: hidden;
}
.outlined {
  font: 800 40px Arial;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
}
.animatedGradientTextOrange {
  --bg-size: 400%;
  background: linear-gradient(
      90deg,
      var(--ueberschriftSattesGelb),
      white,
      var(--ueberschriftSattesGelb)
    )
    0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
}

@media (prefers-reduced-motion: no-preference) {
  .animatedGradientTextOrange { animation: move-bg 9s linear infinite; }
  @keyframes move-bg { to { background-position: var(--bg-size) 0; }  }
}

.animatedGradientTextGelb {
  --bg-size: 400%;
  --color-one: hsl(56 90% 55%);
  --color-two: hsl(40 95% 95%);
  background: linear-gradient(
      90deg,
      var(--color-one),
      var(--color-two),
      var(--color-one)
    )
    0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .animatedGradientTextGelb { animation: move-bg 5s linear infinite; }
  @keyframes move-bg { to { background-position: var(--bg-size) 0; }  }
}
.animatedGradientTextGelb a:hover { color: yellow }
.animatedGradientTextTeal {
  --bg-size: 400%;
  background: linear-gradient(90deg, var(--lighterTeal), white, var(--lighterTeal) ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .animatedGradientTextTeal { animation: move-bg 9s linear infinite; }
  @keyframes move-bg { to { background-position: var(--bg-size) 0; }  }
}

.animatedGradientTextPurple {
  --bg-size: 400%;
  background: linear-gradient(90deg, var(--magic), white, var(--magic) ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .animatedGradientTextPurple { animation: move-bg 9s linear infinite; }
  @keyframes move-bg { to { background-position: var(--bg-size) 0; }  }
}

.textOrangeFallback {
	color: white;
	font-family: 'jesaya', Arial, sans-serif;
}
.textGelbFallback {
	color: var(--ueberschriftSattesGelb);
	font-family: 'jesaya', Arial, sans-serif;
}
.textTealFallback {
	color: --var(lighterTeal);
	font-family: 'jesaya', Arial, sans-serif;
}
.textPurpleFallback {
	color: var(--magic);
	font-family: 'jesaya', Arial, sans-serif;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 90%;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -45%;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltipKompBtn .tooltiptextKompBtn {
  visibility: hidden;
  width: 250px;
  height: 45px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 40;
  bottom: 100%;
  left: 50%;
  margin-left: -140px;
  top: 100%;
  opacity: 0;
  transition: opacity 1s;
}
.tooltipKompBtn:hover .tooltiptextKompBtn {
  visibility: visible;
  opacity: 1;
}
.tooltipKompBtn {
  position: relative;
  display: inline-block;
}

.tooltipOrt {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipOrt .tooltipOrtText {
  visibility: hidden;
  width: 380px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -190px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}
@media only screen and (max-width: 600px) {
  .tooltipOrt .tooltipOrtText {
  width: 380px;
  margin-left: -170px;
  }
}

.tooltipOrt:hover .tooltipOrtText {
  visibility: visible;
  opacity: 1;
}

/** Folgende 3 Klassen sind dafür, um ein Hintergrundbild transparent zu machen und Content darauf nicht */
.transBGWrapper {
  overflow: hidden;
  position: relative;
}
.transBG {
  opacity: 0.75;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.transBGContent {
	position: relative; 
	margin: clamp(8px, 2%, 2%);
}