* {box-sizing: border-box;}   /* Boxen rutschen ineinander */	


body {
		font-family: Verdana, sans-serif;
		font-size: 	1em;	/* 0.8em;  */
		margin: 0px;
		background: linear-gradient( to top right, lightyellow, lightgreen );	/* lightyellow;  #fbba003d; */
	}

h3	{	/* Hinweis Seitennavigation" */
		color: darkblue;
	}

p	{
		/* margin: 0px; beseitigt den Abstand zwischen den Absätzen */
		color: black;
		/*Blocksatz*/
		text-align:justify;  
		text-justify:auto;
	}

.clear 
{				/* <br clear=all>	 <!--  clear=all veraltet, nach float-Elementen genutzt um am linken Rand zu starten --> */
  clear: both;
}

.scrollKarte
	{
	 overflow: scroll;  /* auto - Similar to scroll, but it adds scrollbars only when necessary, hidden; */	
	}

figure
	{
		margin: 0%;
		overflow: auto;  /* auto - Similar to scroll, but it adds scrollbars only when necessary, hidden; */	
		font-size: 1em;		
	}

#karten_container 
	{
	/*float: left;					Navigation kann ohne float bei höherer Auflösung auch neben der Karte stehen */
	position: relative;		/* sonst rutscht Overlaytext unters Foto */
	float: left;				/* damit Folgetext links vorbei läuft */
	/*max-width: 50%;  			nur 50 % der Seitenbreite wird genutzt*/
	/* margin-right: 20%;			damit Abstand zum rechten rand bleibt */
	width: auto;					/*100% gesamte Bildschirmbreite wird genutzt, auto nur bis Dateigröße */
	/*width: 100%;					Da die Karte den ganzen Bildschirm füllt, stimmen die aktiven Bereiche nicht mehr /*
	/*margin-top: -1%;*/
	}

/*	!!! nicht genutzt !!!*/	
#karte img
	{
	/* border: 10px;		 CSS: border: 10% is not a border value 
	background-color: lightgreen; */
	/* width: 100%;			 feste Kartenwerte width="730" height="582" align=left */
	/* margin: -1%;			Link rutscht unter die Karte */
	
	}

#handykarte 					/* zusätzliche NLP-Karte füllt den ganzen Bildschirm */
	{
	float: left;
	width: 100%;				/*100% gesamte Bildschirmbreite wird genutzt, auto nur bis Dateigröße */
	/*da volle Bildbreite wird angezeigt, volle Seitenbreite auf Handy */
	height: auto;				/* auto zum Zentrieren funktioniert nicht */
	position: relative;
	font-size: 1em;
	}

.karten_overlay 
	{
	  position: absolute; 
	  /* bottom: 5%; 			 nur zum Ausgleich der aufgetretenen Verschiebung */
	  background: rgb(0, 0, 0);
	  background: rgba(0, 0, 0, 0.5); /* Black see-through */
	  color: #f1f1f1; 
	  width: auto; /*100%; */
	  transition: .5s ease;
	  opacity:0;
	  color: white;
	  font-size: 120%;			/* 20px; */
	  padding: 2.5%;			/* Text ins Bild einpassen 20px; */
	  text-align: center;		/* justify; Blocksatz, bei Bildtitel text-align: center; */
	}
	
.karten_overlay:hover.karten_overlay
	{
	  opacity: 1;
	}


	
.otegau
	{
	
	/*margin-top: 42%; */
	/*padding-left: 100%;*/
	float: right;
	margin-top:	-5%;	/* 	damit nach oben rutscht, sonst unterhalb der Karte */
	margin-right: 5%;
	
	width: 15%;
	height: auto;
	/*background-color: pink;*/
	}

.kontakt
	{
	width: 10%;	
	}

#hinweis
	{
		margin-top: 10%;
		margin-left: 5%;
	}

footer
	{
		margin: 2% 0%;
		/*padding: 2%;
		background: linear-gradient(to bottom right, lightyellow, lightgreen );
		 background-color: lightyellow; */
	}

.navigation			/* Navigation als Klasse, wenn 2x Navigationsbereich */
{
	float: none;		/* Floaten bricht die Navigationsbezeichnungen zwischen den Wörtern um */
	/*width: 44%;		   analog JavaScript Text, sonst liegt das Startfoto etwas auf dem Text */
	
	padding-left: 3%;		/*	hält Abstand und färbt Bereich ab Rand ein, zu Testzwecken 
	background: red; */
	/* background-color: lightyellow; */
}

nav
	{
		color: darkred;
		margin: 2%;
		display: block; 
	}
	
a
{
	text-decoration: none;
}

/* Rücksprungknopf */	
button
	{
		margin: auto; 
		color: darkblue;
		padding: 1%;
		background: white;
		border-color: lightyellow olive olive lightyellow;
		border-style: solid;
		border-width: thick;						/* auch thick; thin; medium */
		/*float: none;
		width: auto;
		display: block;
		text-align: center; */
	}
	
.nach_oben		/* hoch RÜCKSPRUNG nach_oben*/
	{
		display: flex;
		/* margin: 2%; */
		padding: 2%;
		float: none;
		/*background: linear-gradient( to top right, lightyellow, lightgreen ); */
	}
	
.nach_oben:before
	{
	content: '\21D1\2003';			/* \21D1\2003\a0 https://www.toptal.com/designers/htmlarrows/ */
	color: darkred;
	display: inline;						/*damit Pfeil und Hinweistext auf einer Zeile */
	}
	
.nach_oben:after
	{
	content: '\2003\21D1';			/* \21D1\2003\a0 https://www.toptal.com/designers/htmlarrows/ */
	color: darkred;
	display: inline;						/*damit Pfeil und Hinweistext auf einer Zeile */
	}
		
/* Hinweisbox  https://cssarrowplease.com/ */
.boxArrow 
{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	background: lightgreen;		/* #88b7d5; */
	border: 4px solid darkgreen;	/* #c2e1f5; */
	margin-left: 1%;
	margin-right: 1%;			/* damit rechts und links auf dem Handy-Display ein Rand erscheint */
	padding: 1%; 
	/* min-width: 10%; */
	/* display: inline; Box zerlegt, block; Box über die ganze Seite */
	
}

#boxKartenseite1
	{
	margin-bottom: 8%;			/* damit die Spitze nicht in die Karte sticht */
	margin-top: 1%;				
	}

#boxKartenseite2
	{
	margin-bottom: 8%;			/* damit die Spitze nicht in die Karte sticht */
	margin-top: 1%;				
	}	
.boxArrow:after, .boxArrow:before 
{
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0%;
	width: 0%;
	position: absolute;
	pointer-events: none;
}

.boxArrow::before		/* egal ob : oder ::, nach jedem Wort wird umgebrochen? display: block; funktioniert nicht */
	{
		content: "";
	}
	
.aboxArrow:after 
{
	border-color: rgba(136, 183, 213, 0);
	border-top-color: darkgreen;		/* #88b7d5; */
	border-width: 30px; /* funktiniert nicht mit %*/
	margin-left: -30px; 
}
.boxArrow:before 
{
	border-color: rgba(194, 225, 245, 0);
	border-top-color:  darkgreen;	/* solid #c2e1f5; */
	border-width: 36px; 
	margin-left:  -36px; 
}

#zentriert {
  margin-left: auto;
  margin-right: auto;
}
.boxText	
	{
	padding-right: 2%;
	text-align: center; /* text-align: justify; */
	overflow: auto;   /* auto - Similar to scroll, but it adds scrollbars only when necessary, hidden; */
	hyphens: auto;
	}

.boxHinweis
	{
		margin: auto;
		
		/*text-align: center; funktioniert nicht */
		text-shadow: 2px 2px 5px yellow; /* blur effect (5px) to the shadow: */
		overflow: auto;    /*auto - Similar to scroll, but it adds scrollbars only when necessary, hidden; */
	}	


/* ------- Meldung im Div-Container erscheint auf dem Bildschirm und verschwindet rechts, fortlaufende Schleife ---------------- */
.ticker
	{
	padding: 1%;
	background: darkred;
	position: relative;
	animation: myticker 25s infinite;
	color: white;
	text-align: center;
	}

@keyframes myticker 
{
  from {left: -10%;}   to {left: 110%;}
}


.zentriert
	{
	text-align: center;	
	}