body, table		   {
/* background-color:rgb(167,167,167); /*#585858; */ */

 
  background-color: rgb(167,167,167);
   background-color: LightSteelBlue ;

    color: white;

    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";
    font-weight: 250;   
}
:root, table {
  width: 100%;
  
  background: silver;
    color: black ;
  
  display: grid;
  text-align: center;
  color: ;
  font-size:16px;
  line-height: 28px;
}

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


  background-color: rgb(167,167,167);
   background-color: LightSteelBlue ;

   	color: white ; 
    
  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%; }

.grid-container {
    display: grid;
    text-align: center;
    padding: 0px;
    min-width: 300px;
    max-width: 800px;
    line-height: 28px;
    
    background-color: ;
    color: ;
}
/*   das gesamte raster >>>> */ 
.grid-container > div { padding: 0px; }

.Rand-li { grid-area: 1 / 1 / span 4; width: 6px;}
.Rand-re { grid-area: 1 / 3 / span 4; width: 6px;}

/*  menuzeile */ 
.menu {
        grid-area: 1 / 2;
    color:;
    vertical-align: middle;
    font-size: 24px;
    font-weight: normal;
}

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

.inhalt {
        grid-area: 3 / 2;
    color: ;
    text-align: center;
    font-size: 20px;
    vertical-align: top;
}

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

/* <<<< ende formale elemente */

/* <<<< ende gesamtes rasters */
p {
   color:  ;
}    
 
 /* links */   
a	{
	 color: black; 
	 text-decoration:none;
}

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

a:visited {
    text-decoration: none; 
    font-style: normal;
    color:;
}

/* 
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
*/
/*
a:visited {
  color: indianred;
  background-color: transparent;
  text-decoration: none;
}
*/
/*
a:hover {
  color:  ;
  background-color: transparent;
  text-decoration: underline;
  font-style: italic;
/*
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}
*/



/* seitenaufbau */

.jahr {
    font-size: 28px;
	 color: lightsalmon;
	 font-weight: normal;
	 font-style: italic;
}
.jahrklein {
    font-size: 22px;
	 color: lightsalmon;
	 font-weight: normal;
	 font-style: italic; 
}
.pubjahr {
    font-size: 15px;
    color: darksilver;
}

.autor {
	 font-size: 22px;
	 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:  ;
	 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: 12px;
	 font-weight: bold;
}

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

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


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:;
  box-shadow: 8px 4px 12px rgba(0, 0, 0, 0.5); 
  }
  
.herz {
  width: 90px;
  background-color:; 
  color: indianred;
  border: ;
}

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

.init {
  font-size: 24px;
}
.text {
    line-height: 28px;
    font-size: 16px;
/*      font-size: clamp(1.8rem, 1vw, 1.8rem); */
	 font-weight: 350;
	 font-style: normal;
	 text-align: justify;
	 color:  ;
	 background-color: black,40%;
}

.poesie {
  font: courier;
  font-size:12px;
}
.songliste {
	 font-size: 18px;
	 font-weight: normal;
	 font-style: normal;
	 color:  ;
}

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

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

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

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

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

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

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

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

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

.ruler50 {
    width: 50%;
    height: 2;
    color: gray;
}
.ruler75 {
    width: 75%;
    height: 2;
}