/*  */
:root {
  --hellblau: hsl(220,80%,90%);
  --mittelblau: hsl(220,80%,70%);
  --dunkelblau: hsl(220,80%,40%);
  --schwarzblau: hsl(220,80%,25%);
  --dunkelgruen: hsl(100,80%,40%);
  --dunkelrot: hsl(340,80%,40%);
  --dunkellila: hsl(280,80%,40%);
  --schriftgrau: hsl(220,0%,65%);
  --hintergrundgrau: #f5f5f5; 
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: normal;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../font/roboto-v18-latin-ext_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: bold;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../font/roboto-v18-latin-ext_latin-500.woff2') format('woff2');
}

html{
font-size: 4.3vw;  /*normal;  hiermit kann das gesamte Design skaliert werden!*/
}
@media (min-width: 40em) {  /* wenn Medienbreite >40em, dann... */
html{
font-size: 1.7rem;   /* wird das Design in dieser Größe festgehalten! */
}
}

sub, sup { line-height: 0 }
/* Diese Angabe verhindert, daß Subscript oder Superscript den Zeilenabstand des Fließtextes vergrößern. */

p{
/* border: 1px solid blue; */
margin-top: 0.5em;
margin-bottom: 0.5em;
}

dl{ /* HTML-Description-List-Tag */
/* border: 1px solid lightgreen; */
margin-top: 0em;
margin-bottom: 0em;
}

dd{  /* Description-Tag in einer HTML-Liste */
/* border: 1px solid yellow; */
margin-bottom: 0.5em;
}

dt{  /* Titel-Tag in einer HTML-Liste */
/* border: 1px solid red; */
margin-top: 0.5em;
font-weight: bold;
}

body {  /* Gesamtseite */
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin: auto;
font-size: 0.8rem; 
font-family: Roboto;
font-style: normal;
background: var(--hellblau);  /*Farbton,Sättigung,Helligkeit*/
}

header { /* Kopfzeile */
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2.8rem;
flex-direction: column;
padding-top: 0.1rem;
color: white;
background: var(--dunkelblau);
}

.title {  /* Titel (für die Kopfzeile) */
font-size: 1.2rem;
font-weight: bold;
text-align: center;
width: auto;
/* border: 1px solid; */
}

.subtitle {  /* Untertitel (für die Kopfzeile), außerdem die NAV-Leiste*/
font-size: 0.8rem;
font-weight: normal;
text-align: center;
width: auto;
/* border: 1px solid; */
}

nav {  /* Navigationsleiste */
display: flex;
position: fixed;
top: 2.8rem;
left: 0;
right: 0;
height: 1.9rem;
flex-direction: row;
/* justify-content: space-around; */
/* flex-wrap: wrap; */
overflow-x: auto;   /* Damit wird die Navigationsleiste bei Overflow scrollbar. */
color: white;
background: var(--mittelblau); /*Farbton,Sättigung,Helligkeit*/
/* border: 1px solid; */
}

.knopf, .knopf_aktiv { /*Schaltflächen in der Navigationsleiste*/
/* padding: 0.3rem;
margin: 0.4rem; */
padding-top: 0.10rem;
padding-bottom: 0.10rem;
padding-left: 0.2rem;
padding-right: 0.2rem;
margin: 0.2rem;
margin-top: 0.28rem;
width: auto;
cursor: pointer;
font-weight: normal;
font-size: 0.8rem;
text-align: center;
background: var(--dunkelblau);
color: white;
border: 0.5px solid var(--schwarzblau);
border-radius: 0.2rem;
box-shadow: 0.07rem 0.07rem 0.05rem var(--schwarzblau);
}

.knopf_aktiv { /*Schaltflächen in der Navigationsleiste*/
background: var(--hellblau);
color: var(--dunkelblau);
border: 0.5px solid var(--schwarzblau);
box-shadow: 0.07rem 0.07rem 0.05rem var(--schwarzblau) inset;
}


footer {  /* Fußzeile */
/* flex-direction: row;*/
/* justify-content: center; */
/* margin: auto; */
width: 100%;
padding: 0.8rem; 
margin-top: 0.5rem;
color: var(--schwarzblau);
background: var(--mittelblau); /*Farbton,Sättigung,Helligkeit*/
}

main{  /* Inhaltsbereich */
position: fixed;
overflow: auto;
top: 4.7rem;
left: 0;
right: 0;
bottom: 0rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
width: 100%;
/* margin: auto; */
}

.displaycontainer{ /* Box enthält eine komplette Anzeigeeinheit */
display: flex;
margin: 0.6rem;
flex-direction: column;
width: 22rem;
color: var(--schwarzblau);  /*Farbton,Sättigung,Helligkeit*/
background: white;
border-radius: 0.4rem;
box-shadow: 0.3em 0.3em 0.3em hsl(220,20%,40%);
}

.displaytitle{ /* Box für Titel der Anzeigeeinheit */
display: flex;
padding: 0.1em;
padding-top: 0.3em;
padding-left: 1em;
margin-top: 0px;
margin-bottom: auto;
font-weight: bold;
font-size: 1rem;
color: white;
border-top-left-radius: 0.4rem;
border-top-right-radius: 0.4rem;
border-top: 1px solid var(--schwarzblau);
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
background: var(--dunkelblau);  /*Farbton,Sättigung,Helligkeit*/
/* border-style: none; */
}

.displaybox { /* Box für Körper der Anzeigeeinheit */
display: flex;
flex-direction: row;
flex-grow: 1;
/* margin-top: 0px;
margin-bottom: auto; */
/*border: 1px solid;*/
background: none;
/* border: 1px solid;
color: red; */
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
border-bottom: 1px solid var(--schwarzblau);
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
}

.datacontainer3_data{ /* Container-Box für Data-Boxen. Anwendung für drei nebenainanderliegende Container-Boxen */
display: flex;
flex-direction: column;
width: 28%;
/* border-style: none; */
}

.datacontainer3_text{ /* Container-Box für Textfelder. Anwendung für drei nebeneinanderliegende Container-Boxen.*/
display: flex;
flex-direction: column;
/* width: 44%; */
padding-left: 0.5em;
padding-right: 0.5em;
/* border: 2px solid yellow; */
/* border-style: none; */
}

.datacontainer2_text{ /* Container-Box für Textfelder. Anwendung für zwei nebeneinanderliegende Container-Boxen.*/
display: flex;
flex-direction: column;
color: black;
padding-left: 0.5em;
padding-right: 0.5em;
/* border: 2px solid cyan; */
/* border-style: none; */
}

.datatitle{ /* Box für Überschrift Meßwert */
/* display: flex; */
padding-top: 0.4rem;
text-align: center;
/* justify-content: center; */
color: black;
border-style: none;
/* border: 1px solid green; */
}

.datafield { /* Box für Meßwert */
/* display: flex; */
padding: 0.2rem;
text-align: center;
/* justify-content: center; */
font-weight: bold;
font-size: 1.4rem;
color: black;
border-style: none;
/* border: 1px solid;
color: green; */
}

.dataunit { /* Meßwert-Einheit (keine eigene Box) */
font-size: 0.7rem;
font-weight: normal;
color: black;
/* border: 1px solid;
color: green; */
}

.datafoot{ /* Box für Fußzeile Meßwert */
display: flex;
flex-direction: row;
padding-bottom: 0.2rem;
justify-content: center;
color: black;
border-style: none;
}

.datafoot_symbol{
display: flex;
font-size: 1.5rem;
padding-right: 0.3rem;
}

.datafoot_compass{
display: flex;
padding-right: 0.5rem;
font-size: 2rem;
}

.datafoot_value{
display: flex;
align-items: center;
font-size: 1rem;
}

.datafoot_unit{
display: flex;
align-items: flex-end;
padding-bottom: 0.22rem;
padding-left: 0.1rem;
font-size: 0.7rem;
}

.texttitle{ /* Box für Überschrift Meßwert-Text */
/* display: flex; */
padding-top: 0.4rem;
padding-left: 0.3rem;
text-align: left;
color: var(--schriftgrau);  /*Farbton,Sättigung,Helligkeit*/
font-size: 0.8rem;
/* border: 1px solid red; */
}

.textfeld{ /* Standard-Textbox. Hier kommt direkter Fließtext hinein. */
padding: 0.2em;
text-align: left;
color: black;  /*Farbton,Sättigung,Helligkeit*/
font-size: 0.8rem;
/* border: 2px solid red; */
/* border-style: none; */
}

.textfeld_grau{ /* Textbox mit grauer Schrift */
/* display: flex; */
padding: 0.2em;
text-align: left;
color: var(--schriftgrau);  /*Farbton,Sättigung,Helligkeit*/
font-size: 0.8rem;
/* border: 1px solid magenta; */
/* border-style: none; */
}

/*.tab_value{ Tabellenfeld für Werte(keine Box)
font-weight: bold;
font-size: 0.8rem;
border: 2px solid red;
border-style: none;
} */

.imagebox {
display: flex;
flex-direction: row;	
flex-grow: 1;
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
padding-right: 2%;
padding-top: 1em;
/* border: 2px solid red; */
}

.windybox { /* Spezielle Box für den iframe von windy.com*/
display: flex; 
flex-grow: 1; 
justify-content: center; 
padding-left: 0.8rem; 
padding-right: 0.3rem;
padding-bottom: 0.4rem;
}

.meteobluebox {
display: flex;
flex-direction: row;	
flex-grow: 1;
justify-content: center;
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
padding-top: 2%;
padding-left: 2%;
padding-right: 2%;
height: calc(247px + 3rem);
/* border: 3px solid red; */
}

.imagefooter{ /* Untertitel für Diagramme */
display: flex;
flex-direction: row;
flex-grow: 1;
text-align: left;
color: black;
font-size: 0.8rem;
font-weight: normal;
border-style: none;
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
border-bottom: 1px solid var(--schwarzblau);
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
}

.imagefooter_datacontainer{
display: flex;
padding-left: 10%;
padding-right: 3%;
padding-bottom: 0.4rem;
flex-direction: row;
flex-wrap: wrap;
}

.imagefooter_data{
padding-left: 0.6em;
}

img {
width: 100%;
height: auto;
/* padding-top: 1em; */
padding-bottom: 0.2em;
}

table {
border-collapse: collapse;
/* border: 3px solid lightgreen; */
}

.imagefooter_table{   	/* Container für Tabellen unter den Images */
padding-left: 11.4%;
padding-right: 4.8%; 
padding-bottom: 0.8rem;
width: 100%;
}

.tablebox {     /* Mittelteil eines Displaycontainers für Tabellen, in denen Spalten aus eignenen Divs bestehen */
display: flex;
flex-direction: row;
flex-grow: 1;
text-align: left;
color: black;
font-size: 0.8rem;
font-weight: normal;
padding: 0.5rem;
padding-bottom: 0rem;
border-style: none;
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
}

.tablefooter{ /* Fußteil eines Displaycontainers für Tabellen, der nur Fließtext enthalten soll */
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: left;
color: black;
font-size: 0.8rem;
font-weight: normal;
padding: 0.5rem;
border-style: none;
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
border-bottom: 1px solid var(--schwarzblau);
border-left: 1px solid var(--schwarzblau);
border-right: 1px solid var(--schwarzblau);
}


.column{   /* Container für Einzelspalte zusammengesetzter Tabellen  */
/* border: 1px solid green; */
/* color: green; */
}

.kopfzeile{   		/* Kopfzeile für Regentabellen */
border-bottom: 1px solid black;
white-space:nowrap;
}

.fusszeile{			/* Tabellenfuß für Regentabellen */
border-top: 1px solid black;
white-space:nowrap;
}

.messwert{			/* Schriftbild für Messwerte in Tabellen */
color: var(--dunkelblau);    /* (blau) */
font-weight: bold;
}

.dwd{			/* Schriftbild für Fremdwert in Tabellen */
color: var(--schriftgrau);   /* (hellgrau) */
font-weight: normal;
}

.fett{     /*Fette Schrift*/
font-weight: bold;
}


.breit_links{		/* Linksbündige Spalte mit breitem Abstand zur nächsten */
padding-right: 1em;
/* text-align: left; */
/* border: 1px solid red; */
}

.schmal_links {		/* Linksbündige Spalte mit schmalem Abstand zur nächsten */
padding-right: 0.3em;
/* text-align: left; */
/* border: 1px solid red; */
}

.rechts {		/* Spalte rechtsbündig */
text-align: right;
}

.schmal_rechts {     /* Rechtsbündige Spalte mit schmalem Abstand zur nächsten */
padding-left: 0.3em;
text-align: right;
/* border: 1px solid blue; */
}

.breit_rechts {     /* Rechtsbündige Spalte mit schmalem Abstand zur nächsten */
padding-left: 1em;
text-align: right;
}

.max {		/* Spalte füllt den verbleibenden Platz komplett aus */
width: 100%;
}

.bilanz_neg {
color: var(--dunkelrot);
font-weight: bold;
}

.bilanz_pos {
color: var(--dunkelblau);
font-weight: bold;
}

.bilanz_null {
font-weight: bold;
}

.koerper {			/* Tabellenkörper für Regentabellen */
white-space:nowrap;
/* border: 1px solid green; */
}

.koerper tr:nth-child(even) {  /* Zeilen Regentabelle abwechselnd eingefärbt: */
  background-color:  var(--hintergrundgrau);   /* hell-hellgrau */ 
}

tr{
}

td  {
vertical-align: top;
}

th  {		/* Header-Zeile (html-Element) */
vertical-align: top;
/* Der Text im th-Element ist von Hause aus FETT */
}

.quellenliste{
padding-left: 0.4em;
padding-bottom: 0.4em;
}

.debug{
font-size: 0.5rem;
color: black;
font-family: monospace;
background: var(--hintergrundgrau);
}

.radarmarker{
  position: absolute;
  left: 70.8%;
  top: 76.2%;
  width: 9%;
}

.radarmarkertext{
  position: absolute;
  left: 76%;
  top: 76.5%;
  font-size: 75%;
  font-weight: bold;
  color: white;
  text-shadow: 0.05em 0.05em black;
}

.radarlegend{
  position: absolute;
  left: 7%;
  top: 3%;
  width: 12%;
}

.warnmarker{
  position: absolute;
  left: 70.5%;
  top: 46.7%;
  width: 9%;
}

.warnmarkertext{
  position: absolute;
  left: 75.8%;
  top: 46%;
  font-size: 75%;
  font-weight: bold;
  color: white;
  text-shadow: 0.05em 0.05em black;
}

.satmarker{
  position: absolute;
  left: 64.5%;
  top: 66.6%;
  width: 9%;
}

.satmarkertext{
  position: absolute;
  left: 70%;
  top: 66%;
  font-size: 75%;
  font-weight: bold;
  color: red;
  text-shadow: 0.04em 0.04em black;
}