/*      00_bokens.css    */

{
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	background-color : #ffb9b3; /* darker lightsalmon;*/
	background-color : LightSteelBlue ; /* darker lightsalmon;*/
	background-color : DodgerBlue ;
		background-color : CornflowerBlue;
	
	color: white;
	   
	text-rendering : optimizeLegibility;
	font-kerning : normal;
	text-size-adjust : 100%;
	}
	
body {
 /*	font-size: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));    */
  font-size: 18px;
  
 	background-color: ;  
 	color: white ;
 	
 	margin-bottom: 0rem; 
  	min-height: 100vh;
  	text-rendering: optimizeLegibility;
  	-webkit-font-kerning: normal;
    font-kerning: normal;
  	-webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%; 
    font-weight: 300;   
    max-width: device-width;
}

:root {
  width:500;

  background-color: ;
  color: ;
  display: grid;
  text-align: center;
  
  font-size:18px;
  line-height: 28px;
}

@media only screen and (max-width: 1200px) {
  /* For mobile phones: */
  [class*="col-"] {
 width: 100%;
}
}

/* Prevent scaling beyond this breakpoint bei größer 1920 px screen bei 24 px Fontgröße bleiben */
@media (min-width: 800px) {
 :root {
  font-size: 24px;
 }
}

/*   das gesamte raster >>>> */ 
.grid-container {
  display: grid;

    background-color: ; 
        color: ;
        
    font-size: 1em ;
    font-weight: bold;
    padding: 2px;

    wrap-before:initial;
    width: device-width;
    max-width: 800px;

   overflow-wrap: break-word;

}


/* seitenränder */
div.Rand-li {
  grid-column: 1;
  grid-row: 1 / 10;
  width: 12px;
  color: ;
  background-color: ;
}

div.Rand-re {
  grid-column: 6;
  grid-row: 1 / 8;
  width: 12px;
  color: ;
  background-color: ;
}


/*  obere menuzeile */ 
.menu1 {
  grid-row: 1;
  grid-column: 1 / 7;

  background-color: ;
  font-size: 1em;
  font-weight: normal;
  color: ;
    
  vertical-align: middle;
  padding: 0px;
  width: 100%;
  height: 50px
}

div.inhalt {
  grid-row: 1;
  grid-column: 1 / 7;
	background: ; 
	color: white;
	text-align: center;
	font-size: calc(16px + 6 * ((100vw - 320px) / 1280));
/*    font-size: 20px;*/
	vertical-align: top;
}

.ohr {
	grid-row: 2/4;
	grid-column: 2;
	
	padding: 4px;	

  vertical-align: middle;
 
  background-color: ;
	  width:80;
}


.auge {
	grid-row: 4  ;
	grid-column: 5;
	
	padding: 4px;	

	 width: 10;
	 background-color: ;
}

.mund {
  grid-row: 5;
  grid-column: 3 / 5;

  background-color:  ;
  color: white;
  vertical-align: middle;
  font-size: 16px;
  font-weight: normal;
  width: 100%;
  height: 80%
}



/*  logo */ 
.logo {
  grid-row: 2 /4 ;
  grid-column: 3 / 5;

  background-color:  ;
  color:lightcyan ;
  
  font-size: 2em;
  vertical-align: top;
  padding: 0px;
  width: 100%;
}

/* bokens */
.bokens {
  grid-row: 4;
  grid-column: 3 / 5;
  
  background-color: ;
  color: lightcyan;
  
  width: 100%;
  height: 50px;
}
  


/*  menu2 */ 
.menu2 {
  grid-row: 6;
  grid-column: 2 / 6;
  

  background-color: ;
  color: ;
  
  font-size: 20px;
  text-align: center;
  vertical-align: top;
  padding: 2px;
  width: 100%;
  height: 80%

}



 /*  fusszeile */ 
  .fuss {
  	  grid-row: 7;
  grid-column: 2 / 6;


 color: ;
 text-align: middle;
 vertical-align: top;
 font-size: 12px;
 font-weight: normal;
  padding: 0px;
  width: 100%;
}

/* <<<< ende formale elemente */

/* <<<< ende gesamtes rasters */

 
 
 /*     sprungmarken  links  */   
 
/* unvisited link */
a	{
	 font-size: 17px; 
	 color: blue; 
	 text-decoration: none;
}

/* mouse over link */
a:hover {
	text-decoration: none;
	font-style: italic;
	color: yellow;
}* 

/* selected link */
a:active {
  color: blue;
}

/* visited link */
a:visited {
	text-decoration: none;
    color:hotpink;
    font-size: 100%;
}

/*
img {
  vertical-align: middle;
  /*display: block;*/
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1px;
  border: 0px solid black;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5); 
  }




/* jahre */
.jahr {
 font-size: 5vw;
 color: orange;
 font-weight: normal;
 font-style: italic;
}

.pubjahr {
 font-size: 3.5vw;
}

.ruler40 {
 width: 40%;
 size: 2;
}
.ruler50 {
 width: 50%;
 size: 2;
}
.ruler75 {
 width: 75%;
 size: 2;
}


.was {
 font-size: 1.3rem;
 font-weight: normal;
 font-style: normal;
 color: white;
}

}
.stern {
 font-size: 3vw;
 color: black;
}