/* background-image:url(gc/2023__bokens_startpic_sakitama.jpg); width: 100%; height: auto; 
 background-position:top center;
 background-repeat: no-repeat;
 background-attachment:fixed; 
 */

 /*
GRAUTÖNE
 WhiteSmoke *#F5F5F5; rgb(245,245,245)  - #E8E8E8	rgb(232,232,232)  -  
 
 Geinsboro #DCDCDC	rgb(220,220,220) -
 
 Silver	#C0C0C0	rgb(192,192,192) -
#C8C8C8	rgb(200,200,200) -
#D0D0D0	rgb(208,208,208) -

LightGray	#D3D3D3	rgb(211,211,211) 
*/ 
{
  -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 : #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%;
 	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;
     font-size:18px;
    line-height: 28px;
}

:root {
  width:600;

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

.grid-container {
  display: grid;
  
	background-color : #ffb9b3; /* darker lightsalmon;*/
	background-color : LightSteelBlue ; /* darker lightsalmon;*/
	background-color : DodgerBlue ;
		background-color : CornflowerBlue;
	
	color: white;
    padding: 5px;
    width: device-width;
    justify-content: center;
    font-size:18px;
    line-height: 28px;
}

 /*  Rand-li */ 
div.Rand-li {
	grid-area: span 4/ 1;

	text-align: center;
	vertical-align: top;
	font-size: 18px;
	font-weight: normal;
	 line-height: 36px;
	 background-color: ;
	 width: 0px;
}

 /*  Rand-re */ 
div.Rand-re {
	grid-area: span 4/ 3;

	text-align: center;
	vertical-align: top;
	font-size: 18px;
	font-weight: normal;
	 line-height: 36px;
	 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;
	 background-color: ;
}

 /*  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: white;
	text-align: center;
	font-size: calc(16px + 6 * ((100vw - 320px) / 1280));
/*    font-size: 20px;*/
	vertical-align: top;
}

div.seiteninhalt {
	grid-area: 3 / 2;
	background: ; 
	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;
}

/*  titelzeile */ 
.seitentitel {
	grid-area: 2 / 2;
	color: white;
	font-size: 24px;
	line-height: 28px;	
	vertical-align: top;
}

.inhalt {
	grid-area: 3 / 2;
	color: lightgray;
	text-align: center;
/*	font-size: calc(16px + 6 * ((100vw - 320px) / 1280));*/
    font-size: 18px;
	vertical-align: top;
}

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

/* <<<< ende formale elemente */

/* <<<< ende gesamtes rasters */
p {
	color: white;
}    
 
 /*+ <<<<<<  speziell Homepage bokens.css 
 
 /* links */   
a	{
	 font-size: 22px; 
	 color: darkred; 
	 text-decoration:none;
}

a:hover 
	text-decoration: none;
	font-style: italic;
   	color: yellow;
}* 
a:visited {text-decoration: none;
    color:orange;
    font-size: 150%;}

    
    
.zeiger {
	font-size: 24px;
}
*/

 /*+ <<<<<<  speziell Homepage epics words tiunes 

/* seitenaufbau */

}


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

.titel {
	 font-size: 26px;
	 font-weight: bold;
	 color: LightCyan;
}

.untertitel {
	 font-size: 24px;
	 font-weight: 500;
}

.titel2 {
	 font-size: 24px;
	 font-weight: normal;
	 color: white;
	 font-style: italic;
}

.abteilung {
	 font-size: 42px;
	 font-weight: normal;
	 font-style: italic; 
	 color: PaleTurquoise;
}

.nummer {
	 font-size: 24px;
	 font-weight: normal;
	 color: antiquewhite;
	 font-style: italic;
}

.medium {
	 font-size: 22px;
	 font-weight: normal;
}

.laufzeit {
	 font-size: 16px;
	 font-weight: normal;
	 font-style: italic;
}

.datpriv {  
	 font-size: 16px;
	 font-weight: bold;
}

.img {
  box-shadow: 10px 10px 5px black;	
  -moz-border-radius:25px;
  -webkit-border-radius:25px;
  border-radius:25px;
}


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


.was {
	font-size: calc(10px + 6 * ((100vw - 320px) / 680));	
	 font-weight: normal;
	 font-style: normal;
	 color: white;
}

.videoinfo {
	 font-size: 18px;
	 font-weight: normal;
	 font-style: normal;
	 color: white;
}

.herz {
	width: 90px;
background-color: ;
	color: indianred;
	border: 2px;	
}

div.herz2 {
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	width: 90px;
	background-color: ;
	color: indianred;
	border:2px;	
}

.init {
	font-size: 24px;
}

.text {
	line-height: 24px;	
	font-size: 16px;
/*      font-size: clamp(1.8rem, 1vw, 1.8rem); */
	 font-weight: 350;
	 font-style: normal;
	 text-align: justify;
	 color: white;
}
.textprivacy {
 line-height: 20px;
 font-size: 18px;
/*      font-size: clamp(1.8rem, 1vw, 1.8rem); */
 font-weight: 650;

 color: orange;
}
.poesie {
	font: 12px courier;	 /*
	=======! The font property is a shorthand property for:font-style font-variant font-weight font-size/line-heightfont-family */
	font-size:12px;
}
.songliste {
	 font-size: 18px;
	 font-weight: normal;
	 font-style: normal;
	 color: white;
}

.zitat {
	font-size: 12px;
	font-weight: normal;
	font-style: italic;
}

.wer {
	font-size: 12px;
	font-weight: normal;
	 font-style: normal;
}

.stern {
	font-size: 1rem;
	color: white;
}

.hinweis {
	font-size: 14px;
	font-style: italic;
	color: white;
}

.waswannwo  {
	 font-size: 14px; 
	 font-weight: normal; 
	 color: #F3E2A9;
}

.wogezeigt {
	 font-size: 16px; 
	 font-weight: normal; 
	 color: #F3E2A9;
}

.copy {
	font-size: 12px;
	color: gray;
}

img {
	max-width: 100%;
	height: auto;


.rulerklein {
	width: 40%;
	height: 2px;	
	color: gray;
}

.rulermittel {
	width: 50%;
	height: 2px;	
	color: gray;
}
.rulergross {
	width: 75%;
	height: 2px;	
}


.gross {font-size: 150%;} 
      
picture {
  width: auto; 
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.jahr {
    font-size: 26px;
	 color: yellow;
	 font-weight: normal;
	 font-style: italic;
}
.pubjahr {
    font-size: 18px;
	 color: yellow;
	 font-weight: normal;
	 font-style: normal;
}

.jahrklein {
    font-size: 4vw;
	 color: yellow;
	 font-weight: normal;
	 font-style: italic; 
}


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

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

.was {
	font-size: 22px;
	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;
}

}

h1 {
	font-size: 24px;
	font-weight: 600;
	font-style: normal;
	color: white;
}

h2 {
	font-size: 20px;
	color: white;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

h5 {
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
}

h6 {
	font-size: 12px;
	font-weight: 500;
}