/* Media-Einstellungen */

/* 2025-05-22 Version 001 */

/* Unabhängige Einstellungen */
button {font-size: 3vw;}
p {font-size: 3vw;}
ul {font-size: 3vw;}

div.header-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 1ex;
    background-color: yellow;
}

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

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

#header {width:100%; }

#datenfenster {width:100%; padding-left:1em;}
#datenfenster_fullscreen {width:100%; padding-left:1em;}

#sidebar {width:100%; }

#footer {width:100%; }
#seitenheader::after {content: "Default"}

/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
#seitenheader::after {content: "576px and up"}
h1 {font-size: 3vw;}
h2 {font-size: 2.4vw;}
h3 {font-size: 1.7vw;}
button {font-size: 1.2vw;}
p {font-size: 1.2vw;}
ul {font-size: 1vw;}
.tablesorter {font-size: 1vw !important}

.dyn-grid {
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
    font-size: normal;
    background-color: pink;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
h1 {font-size: 2.5vw;}
h2 {font-size: 2.2vw;}
h3 {font-size: 1.7vw;}
button {font-size: 1vw;}
p {font-size: 1vw;}
ul {font-size: 1vw;}
.tablesorter {font-size: 1vw !important}

#seitenheader::after {content: "768px and up"}

#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) {
#seitenheader::after {content: "1200px and up"}

h1 {font-size: 3vw;}
h2 {font-size: 2.4vw;}
h3 {font-size: 1.7vw;}
button {font-size: 0.8vw;}
p {font-size: 1vw;}
ul {font-size: 1vw;}
.tablesorter {font-size: 0.9vw !important}


.dyn-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 1em;
    background-color: pink;
    }
#datenfenster {width:90%; float:left; }
}

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

@media screen and (min-width: 1600px) {
#seitenheader::after {content: "1600px and up"}
#wrapper {width:90%;  margin: 0 auto; }
button {font-size: 1vw;}
p {font-size: 1vw;}
ul {font-size: 1vw;}
.tablesorter {font-size: 0.8vw !important}

.dyn-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 1em;
    background-color: pink;
    }
}