{
    box-sizing: border-box;
}

body {
    background-color: rgb(215, 215, 215);
    color: #0F0F0F;
    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: 150;   /* normal ist 300 - hab es aber gerne etwas dünner, deshalb nur 100 */
    color: rgb(102, 102, 102);  
}


/* FONTGRÖßEN AUTOMATISCH:  16px @ 320px increasing to 24px @ 1920px */
/* bei 320px ist 16px kleinste Font-größe - bei 1920px screen ist 24px größte Fontgröße -s.u. */
<!-- 1rem =16px -->
@media (min-width: 320px) {
    body {
        font-size: clamp(16px, calc(1rem + ((1vw - 3.2px) * 0.5)), 24px);
        min-height: 0vw; /* für Safari resize fix */       
    }
}

/* Prevent scaling beyond this breakpoint bei größer 1920 px screen bei 24 px Fontgröße bleiben */
@media (min-width: 1920px) {
    :root {
        font-size: 24px;
    }
}


/* STYLES FÜR ALLE media screen-Größen */
img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.bild img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

a {
    color: green;
    text-decoration: none;
}

a:link {
    color: green; 
    text-decoration: none;
   <!--  font-weight: bold; -->
}

a:hover {
    background-color: white;
    color: red;
    text-decoration: none;
}

strong {
    font-weight: bold;
}

p {
    color: rgb(0, 0, 0);
}
.copy {
    color: rgb(255, 255, 255);
    font-size: .8rem;
    text-align: right;
    padding: 5px;
}
.copy1 {
    color: white;
    background-color: #DBA901;
    font-size:1rem;
    text-align: center;
    line-height:0.8;
    padding: 5px;
}
.copy2 {
	 color: white;
    background-color: #DBA901;
    font-size: .8rem;
    text-align: center;
    padding: 5px;
}
/* MAß-ANGABEN ZU DEN EINZELNEN ZELLEN IM GRIDCONTAINER */
.menu {
    grid-column: 2 / 3;  /* d.h. Spalte 2 bis 3 */
    grid-row: 1 / 2;	 /* d.h. Reihe 1 bis 2 */
    background-color: rgb(211, 211, 211);
    text-align: center;
}

.head {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: rgb(220, 220, 220);
    color: rgb(105, 105, 105);
}

.subhead {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: rgb(220, 220, 220);
    color: rgb(105, 105, 105);
}

.bild {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background-color: rgb(105, 105, 105);
    margin: 0 auto;
}

.text {
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    background-color: rgb(211, 211, 211);
    /*color:rgb(0,0,0);*/
     text-align: justify;
     padding: 20px;
}

.fuss {
    grid-column: 2 / 3;
    grid-row: 6 / 7;
    background-color: rgb(220, 220, 220);
    text-align: center;
    /* ??padding:5px;?? */
}

.li {
    grid-column: 1 / 2;
    grid-row: 1 / 7;
    background-color: rgb(215, 215, 215);
}

.re {
    grid-column: 3 / 4;
    grid-row: 1 / 7;
    background-color: rgb(215, 215, 215);
}


/* DEFINITIONEN FÜR GRIDCONTAINER: */
/* 320 - 480 px Portrait: */
@media screen and (min-width:320px) and (max-width:479px) {   /* min-width d.h. mindestens 320 px breit oder mehr; max-width: d.h. maximal bis 479px breit oder weniger!!! */
    .gridcontainer {
        display: grid;
        width: 100%;
        height: auto;
        grid-template-rows: .05fr .05fr .05fr .1fr auto .05fr;
        grid-template-columns: 5% 90% 5%;
        align-content: center;
    }
}

/* 480 - 800 px Portrait: */
@media screen and (min-width:480px) and (max-width:799px) {
    .gridcontainer {
        display: grid;
        width: 100%;
        height: auto;
        grid-template-rows: .05fr .05fr .05fr .1fr auto .05fr;
        grid-template-columns: 8% 84% 8%;
        align-content: center;
    }
}

/* 800 - 1200 px Portrait: */
@media screen and (min-width:800px) and (max-width:1199px) {
    .gridcontainer {
        display: grid;
        width: 100%;
        height: auto;
        grid-template-rows: .05fr .05fr .05fr .1fr auto .05fr;
        grid-template-columns: 10% 80% 10%;
        align-content: center;
    }
}

/* 1200 - 1600 px Portrait: */
@media screen and (min-width:1200px) and (max-width:1599px) {
    .gridcontainer {
        display: grid;
        width: 100%;
        height: auto;
        grid-template-rows: .05fr .05fr .05fr .1fr auto .05fr;
        grid-template-columns: 20% 60% 20%;
        align-content: center;
    }
}

/* > 1600 px Portrait: */
@media screen and (min-width:1600px) {
    .gridcontainer {
        display: grid;
        width: 100vw;
        height: auto;
        grid-template-rows: .05fr .05fr .05fr .1fr auto .05fr;
        grid-template-columns: 30% 40% 30%;
        align-content: center;
    }
}