/* gedanken_mss.css */ 				/* typ(selektor) * [attributname] oder selektor[attributname] #id_name .klasse  */
html {
	background		: rgb(255 255 255);
	background-image: url(../img/bg_hgruen.jpg);
	background-size: 100% 100%;
	min-height: 100%; 
	font-size : 100%;
}
*{
 	font-family	: calibri, Arial, sans-serif, 'Comic Sans MS', "Times New Roman";
	font-size	: 1.26rem;
	line-height	: 2.0rem;
	box-sizing	: border-box;
}
.minor	{ /* z.B.: <span class="minor"> */
	font-size		: 1.0rem;
}

body{
	background	: MINTCREAM;
	border		: 0px solid maroon;	
	margin		: 0px 0px 0px 0px;
	padding		: 0px 10px 0px 0px;
	min-width	: 480px;
	max-width	: 1200px;		
	height		: 100%;
	color		: midnightblue;
	margin-left : auto;
	margin-right: auto;

}
#kopf_banner_gedanken{
	background		: violet;
	background-image: url(../img/gedanken1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	top			: 0px;	
	border		: 0px;
	margin		: 0px;
	position	: relative;	
	left		: 0%;
	width		: 100%;
	height		: 100px; /* ursprünglich 58px; jetzt gleich wie #kopf_banner_math_index  */

}
section p::first-letter {
    font-size: 1.8rem;
    font-weight: bold;
    color: darkgreen;
}
 /* #corpus{
	background-color: #fafad2;
	border-top	: 0px solid maroon;
	border-bottom	: 1px solid maroon;		
	margin		: 0px;
	padding		: 0px 30px 0px 30px;
	position	: relative;	
	left		: 0%;
	width		: 100%;
	height		: 100%;
} */
 .corpus{
	background-color: rgb(75%,95%,75%);	
	background-color:LIGHTYELLOW;
	border-top	: 0px solid maroon;
	border-bottom	: 0px solid white;		
	margin		: 0px 0px 0px 0px;
	padding		: 1.6rem 1.6rem 1.9rem 1.6rem;
	left		: 0%;
	width		: 100%;
	height		: 100%;
	clear		:both;
}
#rauf{
	position: fixed; bottom: 20px; right:20px; padding:10px; border: black 1px dotted; background-color: orange; z-index:2;	
}
a{

	color: green;
}
a:hover{
	background-color:darkorange;
	color: yellow;
}
.band{
	background	: LIGHTCORAL;
	padding		: 0.1em 0 0 2.0em;
	margin		: 0;
}
.minor	{ /* z.B.: <span class="minor"> */
	font-size	: .75em;

}
.bildrand{
	margin			: 0px 0px 0px 0px;
	padding			: 0px 0px 0px 0px;
	border-radius	: 8px;
	box-shadow		: 0px 0px lightgray;
	border			: 1px solid yellow;	
}
h1{
	font-size	: 2.0rem;
	color		: midnightblue;
}
h2{
	font-size	: 1.8rem;	
}
h3{
	font-size	: 1.6rem;;	
}
h4{
	font-size	: 1.4rem;	
}
h5{
	font-size	: 1.2rem;	
}
h6{
	font-size	: 1.1rem;;	
}
abc{
	color: #fff;	
	font-size	: 1.26em;
}
efg{
	font-family	: 'Comic Sans MS', arial; /* Immer Family schreiben  */
	font-size	: 0.95em;
}
abc:hover{
	color: cyan;
	color: #fff;		
}
efg:hover{
	color: yellow;
}
.schweb:hover{
	color:blue;
}

/* ohne padding zur Aufnahme von Spalten: */
 .strumpf{ 
	background-color: #fafad2;	/* LEMONCHIfFON = #fffacd */ 
	border-top	: 0px solid maroon;
	border-bottom	: 0px solid white;		
	margin		: 0 0 0 0;
	padding		: 0 0 0 0;
	left		: 0%;
	width		: 100%;
	height		: 100%;
	display		: flex;
	flex-direction: row; 
 /* flex-direction: column; */
 }
	/* ohne padding zur Aufnahme von Spalten: */
 .strumpf_float{ 
	background-color: #fafad2;	/* LEMONCHIfFON = #fffacd */ 
	border-top	: 0px solid maroon;
	border-bottom	: 0px solid white;		
	margin		: 0 0 0 0;
	padding		: 0 0 0 0;
	left		: 0%;
	width		: 100%;
	height		: 100%;
	float		: left;
 }	
.spalte_1{
	background: transparent url(../img/fafad2.png) left repeat;	/* background-color: #fafad2; hätte die gleiche Wirkung. LIGHTGOLDENRODYELLOW = #fafad2 */
	border-top	: none;
	border-right: none;	
	border-bottom	: 0px solid white;	
	border-left	: none;	
	padding		: 2% 1.45% 2% 2.15%;
	margin		: 0px 0px 1px 0px;
/*	flex-basis	: 50%;  */ 
	height:100%;
	/* float: left; */ 
} /* Die zwei Spalten sind gleich bis auf den leichten Unterschied in der Farbe. Es ist aber praktisch, 
zum Probieren den Spalten und dem Strumpf deutlich verschiedene Farben zu geben. */
.spalte_2{

	background-color: rgb(96%,96%,79%);
	background-color: #fafad2;	/* LEMONCHIfFON = #fffacd */ 	
	border-top	: none;
	border-right: none;	
	border-bottom	: 0px solid white;	
	border-left	: none;	
	padding		: 2% 1.45% 2% 2.15%;
	margin		: 0px 0px 1px 0px;
/*	flex-basis	: 50%;  */ 
	height:100%;
	/* float: left; */ 

}
:target{background:lightgray;}
div#ziel01{display:none;}
div#ziel01:target{display:block;}

div#ziel02{display:none;}
div#ziel02:target{display:block;}

div#ziel03{display:none;}
div#ziel03:target{display:block;}

div#ziel04{display:none;}
div#ziel04:target{display:block;}
	/* fast gleich */
:target{background:lightgray;}
div#ziel_1{display:none;}
div#ziel_1:target{display:block;}

div#ziel_2{display:none;}
div#ziel_2:target{display:block;}

div#ziel_3{display:none;}
div#ziel_3:target{display:block;}

div#ziel_4{display:none;}
div#ziel_4:target{display:block;}
  /*   S P R I T E   */	
.eins, .zwei, .drei, .vier{
	background: url("../img/1234_34.png") no-repeat;
	display: inline-block;
	width: 48px;
	height: 48px;
}
.eins:link{background-position: 0px 0px;}
.eins:hover {background-position: -51px 0px;}
.eins:active {background-position: -102px 0px;}

.zwei:link{background-position: 0px -51px;}
.zwei:hover {background-position: -51px -51px;}
.zwei:active {background-position: -102px -51px;}

.drei:link{background-position: 0px -102px;}
.drei:hover {background-position: -51px -102px;}
.drei:active {background-position: -102px -102px;}

.vier:link{background-position: 0px -153px;}
.vier:hover {background-position: -51px -153px;}
.vier:active {background-position: -102px -153px;}
/*
.eins:link{background-position: 0px 0px;}
.eins:hover {background-position: -34px 0px;}
.eins:active {background-position: -68px 0px;}

.zwei:link{background-position: 0px -34px;}
.zwei:hover {background-position: -34px -34px;}
.zwei:active {background-position: -68px -34px;}

.drei:link{background-position: 0px -68px;}
.drei:hover {background-position: -34px -68px;}
.drei:active {background-position: -68px -68px;}

.vier:link{background-position: 0px -102px;}
.vier:hover {background-position: -34px -102px;}
.vier:active {background-position: -68px -102px;}

.eins:link{background-position: 0px 0px;}
.eins:hover {background-position: -68px 0px;}
.eins:active {background-position: -136px 0px;}

.zwei:link{background-position: 0px -68px;}
.zwei:hover {background-position: -68px -68px;}
.zwei:active {background-position: -136px -68px;}

.drei:link{background-position: 0px -136px;}
.drei:hover {background-position: -68px -136px;}
.drei:active {background-position: -136px -136px;}

.vier:link{background-position: 0px -204px;}
.vier:hover {background-position: -68px -204px;}
.vier:active {background-position: -136px -204px;} */

	/*		Anfang nav_schlicht  */
#nav_schlicht{
	position	: relative;
	left 		: 35px;
	width		: 20em;
}
#nav_schlicht ul li  a   {               /*      :link   weglassen sonst nicht richtig    */
	background-color: lightgray;
	display: block;
	font-family	: Arial, 'Comic Sans MS', sans-serif,  "Times New Roman";	   	
	font-size		: 1.1rem;			/*	 font-size und line-height bei a geht */
	line-height		: 1.1rem;			/*	 font-size und line-height bei a geht */

	text-indent	: 0px;
	text-decoration: none;	
	padding: 0.3rem 0.4rem 0.2rem 0.4rem;
	margin: 0 1.1rem 0 0.1rem;
 /* border: 1px solid yellow; */
	border-top: 1px solid yellow;	
	border-right: 1px solid darkgray;
	border-bottom: 1px solid darkgray;
	border-left: 1px solid yellow;
/*		width: 100px;  */	
}
#nav_schlicht li  a:hover{
		color: magenta;
 }
#nav_schlicht li  a:focus{
		color: blue;
 }
#nav_schlicht li  a:active{
		color: black;
 }
	/*		Ende nav_schlicht  */
	/*	BEGINN nav_wolf  Ludwig Von Hessen Fährt Auto :link :visited :hover :focus :active */
#nav_wolf{
	background-color: transparent;
	padding: 0.0rem 0.0rem 0.2rem 0.0rem;	
	margin: 0.1rem 0 0.1rem 1.6rem;
	height: 1.8rem;
}
#nav_wolf ul{
	list-style-type: none;
	margin: 0;
	padding: 0;

}
#nav_wolf ul li{
	padding: 0.1rem 0 0.1rem 0;
	float: left;
	margin: 0 -0.7rem 0 0;
}
#nav_wolf  ul li  a   {               /*      :link   weglassen sonst nicht richtig    */
	background-color: lightgray;
	display: block;
	font-family	: Arial, 'Comic Sans MS', sans-serif,  "Times New Roman";	   	
	font-size		: 1.1rem;			/*	 font-size und line-height bei a geht */
	line-height		: 1.1rem;			/*	 font-size und line-height bei a geht */

	text-indent	: 0px;
	text-decoration: none;	
	padding: 0.3rem 0.4rem 0.2rem 0.4rem;
	margin: 0 1.1rem 0 0.1rem;
 /* border: 1px solid yellow; */
	border-top: 1px solid yellow;	
	border-right: 1px solid darkgray;
	border-bottom: 1px solid darkgray;
	border-left: 1px solid yellow;
/*		width: 100px;  */	
}

#nav_wolf  ul li a:visited{
}
#nav_wolf ul li a:hover{		/*	Ludwig Von Hessen Fährt Auto :link :visited :hover :focus :active */
	background-color: LIGHTSLATEGRAY; /* silver; */
/*	border: 1px solid darkgray; */
	border-top: 1px solid red;		
	border-right: 1px solid black;	
	border-bottom: 1px solid black;
	border-left: 1px solid red;
	font-weight: bold;
}
#nav_wolf  ul li a:focus{
	background-color: orange; /* silver; */
}
#nav_wolf  ul li a:active{
	background-color: orange; /* silver; */

	border-top: 1px solid yellow;		
	border-right: 1px solid yellow;	
	border-bottom: 1px solid yellow;
	border-left: 1px solid yellow;	
}
	/*	ENDE nav_wolf  */

 	/*	Anfang nav @media  */
@media only screen and (max-device-width: 768px){
	body{
		width		: 900px;			
	}	
}
@media only screen and (max-device-width: 480px){
	body{
		width		: 730px;		
	}
 .strumpf{ 

  flex-direction: column; 
 }
}
 	/*	Ende nav @media  */
footer{
	background-color: lightgray;		
	padding		: 0px 0px 0px 30px;
	color		: black;
	height		: 40px;	
}
	/*	E O F 	*/