/*   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: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));    */
  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;

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

    font-family: sans-serif;

    padding: 2px;

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

- overflow-wrap: break-word;

}


/*                                             anfang               rä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;
}

/*                                             ende               ränder       */




 /*  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: 24px;
	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: 18px;
	font-weight: normal;
	 line-height: 36px;
}


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

/* <<<< ende formale elemente */

/* <<<< ende gesamtes rasters */

/*                                          allg.             markierungen      */

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

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

 /*  sprungmarken                ende             links */

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


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


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



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



.data-abt {
	 font-size: 2rem;
	 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;
}


.gross {font-size: 18px;} 
      


.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;
	 color: ;
	 font-weight: normal;
	 font-style: ; 
}
.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  */



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


.stern{
font-size: 2em;
}


/*                                                             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: 22px;
	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;
}

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