/*     0_boKens_epics.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;

	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 : #ffb9b3; /* darker lightsalmon;*/
	background-color : LightSteelBlue ; /* darker lightsalmon;*/
	background-color : DodgerBlue ;
		background-color : CornflowerBlue;

 	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;   
}
/* normal ist 300 - Lothar hat es aber gerne etwas dünner, deshalb nimmt er nur 100 */

.grid-container {
  display: grid;
  
	background-color : #ffb9b3; /* darker lightsalmon;*/
	background-color : LightSteelBlue ; /* darker lightsalmon;*/
	background-color : DodgerBlue ;
		background-color : CornflowerBlue;

    font-size: 16px ;
    font-weight: bold;

    font-family: sans-serif;

    padding: 2px;

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

- overflow-wrap: break-word;

}

div.grid-container {
  display: grid;
  
	background-color : #ffb9b3; /* darker lightsalmon;*/
	background-color : LightSteelBlue ; /* darker lightsalmon;*/
	background-color : DodgerBlue ;
		background-color : CornflowerBlue;

    font-size: 16px ;
    font-weight: bold;

    font-family: sans-serif;

    padding: 2px;

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

- overflow-wrap: break-word;

}

 /*  Rand-li */ 
div.Rand-li {
	grid-area: span 5/ 1;
	color: white;
	background-color: ;

}

 /*  Rand-re */ 
div.Rand-re {
	grid-area: span 5/ 3;
	color: white;
	background-color: ;

}

 /*  menu */ 
div.menu {
	grid-area: 1 / 2;
	color: white;
	text-align: center;
	vertical-align: top;
	font-size: 18px;
	font-weight: normal;
	 line-height: 36px;
}

 /*  titel */ 
div.titel {
	grid-area: 2 / 2;
	color: white;
	text-align: center;
	vertical-align: top;
	font-size: 18px;
	font-weight: normal;
	 line-height: 36px;
}

div.inhalt {
	grid-area: 3 / 2;

	background-color : #ffb9b3; /* darker lightsalmon;*/
	background-color : LightSteelBlue ; /* darker lightsalmon;*/
	background-color : DodgerBlue ;
		background-color : CornflowerBlue;

	color: white;
	text-align: center;
	font-size: calc(16px + 6 * ((100vw - 320px) / 1280));
/*    font-size: 20px;*/
	vertical-align: top;
}

 /*  fusszeile */ 
div.fuss {
	grid-area: 4 / 2;
	color: white;
	text-align: center;
	vertical-align: top;
	font-size: 18px;
	font-weight: normal;
	 line-height: 36px;
}


h1 {
  color: #fff;
  margin: 0;
  padding: .25em; 
  line-height: 1.1em; 
  text-align: center;
  
  }
h3 {color: yellow;}
p, div {
  color: #fff;
  margin: 0;
  padding:.25em; 
	 line-height: ;
  text-align: center;}


/* links */   
a	{
	 font-size: 22px; 
	 color: darkred; 
	 text-decoration:none;
}

a:hover {
	text-decoration: none;
	font-style: italic;
   	color: yellow;
}

    
    
    
.gross {font-size: 150%;} 
      
picture {
  width: auto; 
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.jahr {
    font-size: 2em;
	 color: yellow;
	 font-weight: normal;
	 font-style: italic;
}
.jahrklein {
    font-size: 4vw;
	 color: yellow;
	 font-weight: normal;
	 font-style: italic; 
}

.pubjahr {
    font-size: .8rem;
    color:  yellow;
}

.autor {
	 font-size: 1.4rem;
	 font-weight: normal;
}

.titel {
	 font-size: 1.8em;
	 	font-size: calc(16px + 6 * ((100vw - 320px) / 3000));
	 font-weight: bold;
	 font-style: normal;
	 color: LightCyan;
}
.abteilung {
	 font-size: 2rem;
	 font-weight: normal;
	 font-style: italic; 
	 color: PaleTurquoise;
}
.hinweis {
	font-size: 18px;
	font-style: italic;
	color: white;
}

.klein {
    font-size: 11px;
	 color: ;
	 font-weight: normal;
	 font-style: ; 
}

.was {
	font-size: 16px;
	font-style: normal;
	color: white;
}

.medium {
	 font-size: 1rem;
	 font-weight: normal;
}
img {
/*  width: auto; 		/* war: 100%; */
/*  max-width: 100%; 	/* 100vw; */
/*  height: auto; 	/* 100vh; */
/*  max-height: 100vh; /* war: 80vh */
  vertical-align: middle;
  /*display: block;*/
  -o-object-fit: cover;
     object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  /* border: 1px solid black;*/
  box-shadow: 8px 4px 12px rgba(0, 0, 0, 0.5); 
  }

.stern{
font-size: 2em;
}
.ruler50 {
    width: 50%;
    height: 2;
    color: gray;
}
.ruler75 {
    width: 75%;
    height: 2;
}