@charset "UTF-8";

mark {
	font-weight: 400;
	background: none;
  background-image: linear-gradient(120deg, #ffeb99 0%, #ffeb99 95%);
  background-repeat: no-repeat;
  background-size: 100% 0.6em;
  background-position: 0 99%;
  padding: 0;
  color: inherit;
	}

mark::before,
mark::after {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

mark::before {
    content: " [highlight start] ";
}

mark::after {
    content: " [highlight end] ";
}


  .highlight {
  position: relative;
}
  .highlight::before {
  /* Highlight color */
  background-color: #ffeb99;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}



/* Bildnachweis am Foto */
	.textover-foto {
	  position: relative;
	  color: #111;
	  font-family: "Fira Sans Extra Condensed", sans-serif;
	  font-weight: 300;
	  font-size: 12px; font-size: 1.2rem;
	}
	.bottom-pos {
	  position: absolute;
	  bottom: 4px;
	  right: 1px; 
	  padding: 0 2px;
	  background: linear-gradient(to bottom, 
		  rgba(255,255,255,0.80), rgba(255,255,255,0.60));
		}


/* Skip-Link - direkt zum Hauptinhalt springen */
.skip-link {
	position: absolute;
	top: -50px;
	left: 8px;
	background: #1d255b;
	padding: 10px;
	z-index: 2000;
	font-size: 16px; font-size: 1.6rem;
} 
.skip-link:focus {
	color: #FFCC00; /* Tastaturbedienung*/
    text-decoration: none;
	top: 28px;
	}
.skip-link:focus-visible { 	/* Tastensteuerung */
		outline: 2px solid #1d255b;
	}
.skip-link:active {
	color: #FFEB99; /* Mouseklick */
	}

/*********************************/
/* SCROLL TO TOP BUTTON */
/*********************************/

#myBtn { /* Scroll To Top Button */
  position: fixed;
  bottom: 5%;
  right: 2.5%;
  display: none;
	
  border: 0.2rem solid #fff;
  padding: 8px;
  color: #FFF;
  font-size: 20px;  
  font-size: 2.0rem;
  background-color: #1d255b; /* D-Blau */
  transition: all 0.4s;
  opacity: 0.8;
  z-index: 99;
  cursor: pointer;
  }
	#myBtn:hover,
	#myBtn:focus {
	color: #FFCC00; /* Gelb */
	opacity: 1;
    border: 0.2rem solid #FFCC00;

	}
	#myBtn:active {
	color: #FFEB99; /* H-Gelb */
	opacity: 1;
    border: 0.2rem solid #FFEB99;
	}
	
@media screen and (max-width: 1024px) {
	#myBtn { 
	position: fixed;
	right: 18px; 
	bottom: 15px;
	}
}

/*********************************/
/* BUTTONS */
/*********************************/

.button,
.button:link,
.button:visited {	/* echter Button */
  display: inline-block;
  text-align: center;
  padding: 10px 25px;
  cursor: pointer; 
  margin: 10px auto;
  color: #ffffff; 
  font-weight: 400;
  background-color: #1d255b; /* D-Blau */
}	
	.button:hover {
  		color: #FFCC00;  /* Gelb */
    	text-decoration: none;
	}

	.button:focus {
	  outline: 2px dashed #ff69b4; /* sichtbar für Tastaturnutzer */
	  outline-offset: 4px;
	}
	.button:focus:not(:focus-visible) {
	  outline: none;
	}

	.button:active { /* klicken */
		color: #FFEB99; /* H-Gelb */
	}
	.button.active { /* aktiviert */
		color: #fff;
		background-color: #000;
	}



.btn {	/* Link-Button */
  text-align: center;
  padding: 10px 25px;
  cursor: pointer; 
  margin: 10px auto; 
	
	line-height: 2;
	hyphens: none;

	color: #ffffff; 
	font-weight: 400;
	background-color: #1d255b; /* D-Blau */
}
	.btn:link, 
	.btn:visited {
	color: #ffffff; 
	font-weight: 400;
	background-color: #1d255b; /* D-Blau */

	}
	.btn:hover, 
	.btn:focus {
  		color: #FFCC00;  /* Gelb */
    	text-decoration: none;
	}
	.btn:active {
		color: #FFEB99; /* H-Gelb */
	}



.btn1 { /* Toggle-Button */
	text-align: center;
	border: none;
	font-family: "Fira Sans", sans-serif;
	font-size: 21px; font-size: 2.1rem; 
	font-weight: 400;
	color: #ffffff; 
	
	padding: 10px 25px;
	margin: 0 auto 5px auto; 
	
	background-color: #1d255b; /* D-Blau */
	cursor: pointer; 
} 
	.btn1.active {
  		color: #1d255b;
		background: rgba(255,235,153, 0.5);
	}
@media screen and (max-width: 768px) {
	.btn, .btn1 { /* Toggle-Button */
	font-size: 21px; font-size: 2.1rem;
	padding: 10px 15px;
		} 
	}

@media screen and (max-width: 613px) {
	.btn, .btn1 { 
		width: 180px;
		padding: 10px 10px;
		} 
	}

@media screen and (max-width: 402px) {
	.btn, .btn1 { 
		font-size: 18px; font-size: 1.8rem; 
		width: 49%;
		padding: 10px auto;
		}
} 
	
@media screen and (max-width: 342px) {
	.btn, .btn1 { 
		font-size: 16px; font-size: 1.6rem; 
		width: 48%;
		padding: 10px 4px;
		} 
	}
	
@media screen and (max-width: 300px) {
	.btn, .btn1 { 
		font-size: 16px; font-size: 1.6rem; 
		width: 100%;
		padding: 10px 4px;
		} 
	}


/*********************************/
/* LINIEN */
/*********************************/

.hr1 { 
	border: 1px solid #000;
	border-radius: 20px; 
	width: 97%;
	margin: 0 auto;
}

.hr2 { 
	border: 3px solid #F1F1F1;
	border-radius: 20px; 
	width: 60%;
	margin: 60px auto;
}

.spacer { margin-bottom: 60px; }