/*  0_tunes.css */

  * {
    box-sizing: border-box;
}
body, table		   {
    display: grid;
   min-width: 400px;
    max-width: 1600px;
/*    max-height: 720px; */
    box-sizing: border-box; 



/* farben */
     color: white;
     background-color: #A4A4A4;
    /* WORDS #6E6E6E;  DUNKLER*/
        /* FILMS #A4A4A4; HELLER */
            /* TUNES #6E6E6E; */
                /* 4SCREENS #A4A4A4; */
                    /* VIDEOS #A4A4A4; */


    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: 100;   
    color: ;
}
/* normal ist 300 - Lothar hat es aber gerne etwas dünner, deshalb nimmt er nur 100 */

/* Import ET Book styles
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
@font-face {
    font-family: "et-book";
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
    src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Prevent scaling beyond this breakpoint bei größer 1920 px screen bei 24 px Fontgröße bleiben */
@media screen (min-width: 1920px) {
    :root {
        font-size: 28px;
        grid-template-columns: 40px auto 40px;
        font-weight: normal;
        color: white;
}
}


/* FONTGRÖßEN AUTOMATISCH:  16pt @ 320px increasing to 24px @ 1920px */
/* bei 320px ist 16pxkleinste Font-größe - bei 1920px screen ist 24px größte Fontgröße -s.u. */
/*  Xem oder Xrem = X x 16px - rem rel. von root, em rel von aktuellem wert */

/*        font-size: clamp(1em, calc(1rem + ((1vw - 3.2px) * 0.5)), 2em); */
       /* für Safari resize fix */
        /* bei 320px ist 1em kleinste Font-größe - bei 1920px screen ist 2em größte Fontgröße */
@media (min-width: 320px) {
    body {
        font-size: clamp(1rem, calc(1em + ((1vw - 3.2px) * 0.5)), 3rem);

        color: white;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  body {
        width: device-width;
        background-color: #a4a4a4;
        display: grid;
        grid-template-columns: auto auto auto
        align-content: center;
        color: white;
        font-size: 16px;
  }
}

/* 800 - 1200 px Portrait: */
@media screen and (min-width:800px) and (max-width:1199px) {
    .gridcontainer {
        display: grid;
        grid-template-columns: auto auto auto
        font-weight: normal;
        height: auto;
        font-size: 20px;
        align-content: center;
    }
}


/* 1200 - 1600 px Portrait: */
@media screen and (min-width:1200px) and (max-width:1599px) {
    .gridcontainer {
        display: grid;
        grid-template-columns:auto auto auto
        font-weight: normal;
        height: auto;
        color: white;
        align-content: center;
    }
}


{
        box-sizing: border-box;
}

.grid-container {
        display: grid;

        grid-gap: 1px;
        background-color: ;
        color: ;
        padding: 5px;
        width: ;
}


.Rand-li {
	     grid-area: 1 / 1 / span 4;
    background-color: ;
    font-size: 5px;
}

.Rand-re { 
        grid-area: 1 / 3 / span 4;
    background-color: ;
    font-size:5px;
}

/*  menuzeile */ 
.menu {
        grid-area: 1 / 2;
    color: white;
    text-align: center;
    vertical-align: top;
    font-size: 1rem;
    font-weight: normal;
    font-size: 1rem;
}

/*  titelzeile */ 
.seitentitel {
        grid-area: 2 / 2;
    color: white;
    text-align: center;
    vertical-align: top;
}

/*  inhalt (alles außer menu, titel und fußzeile) >>>>> */

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

 /* <<<< ende inhalt */
 
 /*  fusszeile */ 
  .fuss {
        grid-area: 4 / 2;
    color: white;
    text-align: center;
    vertical-align: top;
    font-size: 1rem;
    font-weight: normal;
          font-size: 0.8rem;
}

/* <<<< ende formale elemente */

/* <<<< ende gesamtes rasters */
} 


p {
   color: white;
}    
    
a	{
	 font-size: 1.2rem; 
	 color: #FFBF00; 
	 text-decoration:none;
}

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

.jahr {
    font-size: 2.5rem;
	 color: yellow;
	 font-weight: normal;
	 font-style: italic;
}

.pubjahr {
    font-size: 0.8rem;
}

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

.titel {
	 font-size: 1.8rem;
	 font-weight: bold;
	 color: white;
}

.titel2{
	 font-size: 1.8rem;
	 font-weight: normal;
	 color: white;
	 font-style: italic;
}

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

.laufzeit {
	 font-size: 1.0rem;
	 font-weight: normal;
}

.untertitel {
	 font-size: 1.5rem;
	 font-weight: normal;
}

.abteilung {
	 font-size: 2rem;
	 font-weight: normal;
	 font-style: italic; 
}

.nummer {
	 font-size: 2.5rem;
	 font-weight: normal;
	 color: white;
	 font-style: italic;
}

.was {
	 font-size: 1.2rem;
	 font-weight: normal;
	 font-style: normal;
	 color: white;
}

.zitat {
    font-size: .8rem;
    font-weight: normal;
    font-style: italic;
}

 .wer {
    font-size: 0.8rem;
    font-weight: normal;
	 font-style: normal;
}

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

.hinweis {
    font-size: 1rem;
    font-style: italic;
}

.waswannwo  {
    font-size: 1rem;
	 color: pink;
}

.wogezeigt {
	 font-size: 1rem; 
	 font-weight: normal; 
	 color: pink;
}

.copy {
    font-size: 1.2rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    font-style: normal;
    color: white;
    font-stretch: normal;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    color: white;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.4rem;
}

h5 {
    font-size: 1.2rem;
    font-weight: 700;
    font-style: normal;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
}