body, table		   {
background-color:rgb(167,167,167); /*#585858; */
    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-color: rgb(167,167,167); /*#585858; */
  display: grid;
  text-align: center;
  color: white;
  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: rgb(167,167,167);
  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: rgb(167,167,167);
    color: white;
}
/*   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: white;
    vertical-align: top;
    font-size: 24px;
    font-weight: normal;
}

/*  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: 20px;
    vertical-align: top;
}

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

/* <<<< ende formale elemente */

/* <<<< ende gesamtes rasters */
p {
   color: white;
}    
 
 /* links */   
a	{
	 font-size: 24px; 
	 color: black; 
	 text-decoration:none;
}

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

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

/* 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: 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: 12px;
	 font-weight: bold;
}

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

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: white;
	 background-color: black,40%;
}

.poesie {
  font: courier;
  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;
}

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

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

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