/* Media-Einstellungen */

/* 2026-02-23 Version okalb */

/* Unabhängige Einstellungen */
p  {font-size: clamp(1rem, 1vw + 1rem, 1.125rem); 
	line-height: clamp(1.5, 1.75vw + 1rem, 1.8);}
h1 {font-size: clamp(2.5rem, 4vw+1rem, 3rem);
	line-height: clamp(1.2, 2vw + 1rem, 1.4);}
h2 {font-size: clamp(2rem, 3.5vw+1rem, 2.5rem);
	line-height: clamp(2.5rem, 4vw + 1rem, 3rem);}
h3 {font-size: clamp(1.75rem, 3vw+1rem, 2rem);
	line-height: clamp(1.4, 1.5vw + 1rem, 1.6);}
h4 {font-size: clamp(1.5rem, 2.5vw+1rem, 1.75rem);
	line-height: clamp(1.5, 1.25vw + 1rem, 1.7);}
h5 {font-size: clamp(1.25rem, 2vw+1rem, 1.5rem);
	line-height: clamp(1.6, 1vw + 1rem, 1.8);}
h6 {font-size: clamp(1rem, 1.5vw+1rem, 1.25rem);
	line-height: clamp(1.6, 0.75vw + 1rem, 1.8);}

button {font-size: clamp(1rem, 1vw + 1rem, 1.125rem);}
pre {font-size: clamp(1rem, 1vw + 1rem, 1.125rem);}
ul {font-size: clamp(1rem, 1vw + 1rem, 1.125rem);;}
fieldset legend {font-weight: bold;}
input {font-size: clamp(1rem, 1vw + 1rem, 1.125rem); }
input[type="text"] {font-size: clamp(1rem, 1vw + 1rem, 1.125rem); }
input[type="submit"] {font-size: clamp(1em, 2.0vw, 1.75em);}
input[type="email"] {font-size: clamp(1em, 2.0vw, 1.75em);}
input[type="submit"] {font-size: clamp(1em, 2.0vw, 1.75em);}


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;}
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) {
#seitenheader::after {content: "768px and up"}
h1 {font-size: 2.5vw;}
h2 {font-size: 2.2vw;}
h3 {font-size: 1.7vw;}
ul {font-size: 1vw;}
.tablesorter {font-size: 1vw !important}

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