/*   0_bokens.css  von 5/2025 */

{
  -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%;
	text-wrap: initial;
	}
	
body {
 font-size: 16px;
  
background-color : #ffb9b3; /* darker lightsalmon;*/
background-color : LightSteelBlue ; /* darker lightsalmon;*/
background-color : DodgerBlue ;
		background-color : CornflowerBlue;
	
color: white;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif,
 	margin-bottom: 0rem; 
  	min-height: 100vh;
  	text-rendering: optimizeLegibility;
  	-webkit-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;   

}

/*
:root {

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

*/


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

color: ;

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

font-family: sans-serif;

padding: 2px;

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

   overflow-wrap: break-word;

}


/*anfangränder  */

/* area:  reihe 1 / spalte 2 

Spalte: 	grid-row: 1 / 4 ;
Reihe 	grid-column: 1; 
/

 /*  Rand-li */ 
div.Rand-li {  
		
	grid-row: 1 / 5;
: 	grid-column: 1;

	color: ;
	background-color: ;

  width: 1px;
}

 /*  Rand-re */ 
div.Rand-re {
	
	grid-row: 1 / 5 ;
	grid-column: 3;

	color: ;
	background-color: ;

  width: 1px;
}

/*enderänder  */


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


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


div.seitentitel {
	grid-row: 2;
: 	grid-column: 2;
	color: white;
	font-size: 16px;
	line-height: 28px;	
	vertical-align: top;
}


div.inhalt {
	grid-area: 3 / 2;
	background-color : CornflowerBlue;: ; 
	color: white;
	text-align: center;

   font-size: 16px;
	vertical-align: top;
}

div.seiteninhalt {
	grid-area: 3 / 2;
	background-color : CornflowerBlue;: ; 
	color: white;
	text-align: center;

  font-size: 16px;
	vertical-align: top;
}

 /*  fusszeile */ 
div.fuss {
	grid-area: 4 / 2;

	color: white;
	text-align: center;
	vertical-align: top;
	font-size: 16px;
	font-weight: normal;
	 line-height: 36px;
}

/* <<<< ende gesamtes rasters */



 /*  sprungmarkenanfang  links */



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


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


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



 /*  sprungmarken ende   links */


/*  allg.   markierungen */

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


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


.punkt {
	font-size: 32px;
	color: red ;
}



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



.data-abt {
	 font-size: 1.5rem;
	 font-weight: normal;
	 font-style: italic; 
	 color: PaleTurquoise;
}

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


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



.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;	
}



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

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


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


/*   anf header   titel*/

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;
}

hr {
	width: 40%;
	height: 1px;	
	color: white;
}

hr.mittel {
	width: 50%;
	height: 2px;	
	color: white;
}
hr.gross {
	width: 75%;
	height: 2px;	
  color: white;
}

/*ende  header*/


/*jahr*/


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

.gruppenjahr {
font-size: 24px;
	 color: yellow;
	 font-weight: bold;
	 font-style: normal; 
}

.jahrklein {
font-size: 14px;
	 color: yellow;
	 font-weight: normal;
	 font-style: italic; 
}

/*ende   jahr*/



.medium {
	 font-size: 1rem;
	 font-weight: normal;
}

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

.neu {
	 font-size: ;
	 font-weight: normal;
	 color: green;
}

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


picture {
  width: auto; 
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}


.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;
}


/*anfang schriftgrößen  */

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

.mittel {
	 font-size: 20px;
	 font-weight: normal;
}

.gross {
	 font-size: 28px;
	 font-weight: normal;
}


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

/* ende schriftgrößen  */


.ruler20 {
width: 20%;
height: 2;
color: white;
}

.ruler30 {
width: 30%;
height: 2;
color: white;
}

.ruler50 {
width: 50%;
height: 2;
color: white;
}

.ruler75 {
width: 75%;
height: 2;
color: white;
}

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



.stern {
	font-size: 24px;
	color: white;
}


/* anfang titel  */

/* variabel */
.titel {
	 font-size: 1.8em;
	 	font-size: calc(16px + 6 * ((100vw - 320px) / 3000));
	 font-weight: bold;
	 color: LightCyan;
}

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


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

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

/* ende titel  */


.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;
}



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


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

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

.werk {
	font-size: 20px;
	font-style: normal;
	color: brown;
}


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

.zeiger {
	font-size: 24px;
}


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