/* Media-Einstellungen */



/* Unabhängige Einstellungen */
div.header-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    background-color: yellow;
}

.dyn-grid {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    background-color: silver;
    }
}

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#datenfenster {width:100%; padding-left:5px;}
#datenfenster_fullscreen {width:100%; padding-left:5px;}

#sidebar {width:100%; }

#footer {width:100%; }


/* Small devices (landscape phones, 576px and up) */

@media screen and (min-width: 576px) {
.dyn-grid {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    font-size: 1em;
    background-color: pink;
    }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
body, p, a, h4 {font-size: 12px;}
#wrapper {width:90%;  margin: 0 auto; }

#datenfenster {width:70%; float:left; }

#sidebar {width:30%; float:right; }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 1200px) { 
body, p, a, h4 {font-size: 14px;}
.dyn-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    background-color: pink;
    }
#datenfenster {width:90%; float:left; }
}

/* Extra large devices (large desktops, 1200px and up) */

@media screen and (min-width: 1600px) {
#wrapper {width:90%;  margin: 0 auto; }
body, p, a, h4 {font-size: 24px;}
.dyn-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 10px;
    font-size: 1em;
    background-color: pink;
    }
}