/*

Neu einbauen: font-family: 'Montserrat';
hat mir gut gefallen auf
https://developerf1.com/how-to/install-php-8-on-windows#article-title-id
nur für die Navigatiom einsetzen

Interresant sind auch die CSS dieser Website.
Lassen sich gut Developer Funktion auslesen!

*/


* {
   font-weight:   normal;  
   box-sizing:    border-box;
   font-family:   'Roboto', sans-serif;
/*   font-family: 'Montserrat', sans-serif; */
}

.dsvgo {
	font-weight:  normal; 
   font-family: 'Courier', sans-serif ;
}


html{
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
}

body {
   background-color: snow;
   font-size:16px;
   color: black; /* Text */
   padding:0;
   margin:0;
/*   margin-top:150px; */ /* zu testzwecken */
}

header {     
  /* display: flex; */
	position: fixed; /* Kein scrollen, Inhalb bleibt bestehen */
   top:0; 
   width: 100%;    /* Dynamisch über ganze Seitenbreite */
   height: 50px;
/*   align-items: center;  */
   background-color: black;
   color: white; /* Text */
   padding: 0 20px 0 0;/* rechts und links Abstand */

/* Diesen Index gesetzt, da ansonsten beim Scrollen die javscript Grafiken nicht vom header abgedeckt werden */
   z-index: 1;
/*   border-bottom: 1px solid Red; */
}

.hidden {
   display: none !important;
}

main {
   display:flex;
   margin-top: 75px;
   line-height: 1.3;
   /* Sorgt für einen etwas größeren Abstand
      zur Fusszeile und damit bessere Lesbarkeit */
   margin-bottom:3em; 
/* zu Testzwecken */  
/* border: 1px solid green; */

}

nav {
   flex: 0 0 200px;
   overflow: hidden;
   /*background-color: yellow; */
/* border: 1px solid red; */
}

/*
   Die Navigation wurde in ein  <div> Element eingebettet
   und fixiert
*/
.fixed {
    position:fixed;
}

article {
    flex: 1 1 0px;
    background-color: snow;
    padding:0 15px 0 15px;
 /* border: 2px solid black; */
}


aside {
    flex: 0 0 150px;
    border: 0px solid black;
    
}

footer{
   display:flex;
   position: fixed;
   bottom : 0;
   width: 100%;
   height: 40px;
   font-size: 0.75em;
   background-color: blue;
   color: white; 
}

footer a {
   color:white;   
}

footer a:hover{
   color:yellow;   
}

/* footer Aufteilung */
.footerLeft{
   flex: 1 1 0px;
   text-align: left;
   padding-left: 20px;
   vertical-align:middle;
}

.footerRight {
   flex: 1 1 0px;
   text-align: right;
   padding-right: 20px;
   vertical-align:middle;
}      

/*
   Navigationsbox an der linken Seite. Die äußere Breite
   wird über die Flexbox "nav" gesteuert!
*/

ul {
   list-style-type: square;
}

/* Navigationsbox mit eigenen Attributen */
nav ul {
   width: 200px;
   list-style-type:none;
   font-size:0.9em;
   padding: 0;
   margin: 0;
   overflow: hidden;
/* border:1px solid black; */
/*border-bottom: 1px solid black; */

}

/* Farbliche Unterlegung beim drüber scrollen */
nav ul li:hover {
   background-color: rgb(144, 238, 144, 0.4);
   border-right: 3px solid blue;
}

article li {
   margin:20px 0 10px 0;
}


.navEbene-1 {
   /* padding: 8px 8px; */
   padding-left: 1.5em; /* h1 bündig mit der Navigationseben */
   margin: 0 0 0.8em 0;
   /* background-color: BlueViolet; */
   /* border: 1px solid red */
}

.navEbene-2 {
   padding-left: 2.5em;
   margin:0 0 0.8em 0;
  /* background-color: gray; */
}

.navEbene-1,.navEbene-2 {
  /* border: 1px solid blue;*/
}

nav h1 {
   font-size: 1.2em;
/*   font-weight: bold; */
   color: black;
   padding-top: 5px;
   margin: 0 0 1em 1em;
}

article h1 {
   font-size: 1.6em;
   margin-top: 0;
   padding-top: 5px;
   color:rgb(128, 0, 0); /* Macron */
/*   font-family:'Montserrat', sans-serif; *//* Google Fonts */
}

article h2 {
   font-size: 1.2em;
   margin: 1.5em 0 1em 0;
   /* border-bottom:1px solid black; */
}

article h3 {
   font-size: 1.05em;
   margin: 1.5em 0 1em 0;
}
   
h4 {
   font-size: 1.0em;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}

table {
   border: 1px solid black;
   border-collapse: collapse;
/*   border-spacing: 0; */
   width: 90%;
/*   font-size: 0.9em; */
   margin: 2em auto 2em auto;
/*   display: table; */
/*   background-color: #f0f4f5; */
}

/* Die erste Reihe einer Tabelle */
tr:first-child {
	background-color: #a2b9bc /* !important; */
}

td,th {
   border: 1px solid #ddd;
   padding:5px 1px 2px 5px;
   font-weight:  normal;
/*   font-family: 'Courier', sans-serif; */
   font-size: 1em;
   vertical-align:top;
   text-align:left;
}

.tb500 {
   width:500px;
}

.tb600 {
   width:600px;
}

.zell-center {
   text-align:center;   
}



th {
   padding:10px 5px 10px 5px; /* Größeres Padding in der Kopfzeile */
}

/*
tr:nth-child(odd){
   background-color:#dddddd;   
}
*/


li a {
   text-decoration: underline;
  /* background-color:white; */
}

a {
   /* font-weight:bold;*/
   color:rgb(0, 0, 255);
}

a:visited {
   color: red;
   border-right: 10px solid blue;
}

p {
   margin-left: 1em;
}

strong{
   font-weight:bold;
}

/* Unterstrich */
.us {
	text-decoration: underline;
}

.hinweis-box {
   /*
   background-color: Bisque;
   border: 1px solid red;
   border-left:5px solid red;
   padding: 5px;
   */
   background-color: rgb(242, 243, 243);
   border: 1px solid black;
   padding: 5px;
}

.hinweis-box-red {
   /*
   background-color: Bisque;
   border: 1px solid red;
   border-left:5px solid red;
   padding: 5px;
   */
   background-color: rgb(255, 165, 0, 0.6);
   border: 1px solid red;
   padding: 5px;
}

.kalt{
      color:blue;
   }
   
.warm {
      color:red;
      }
      
.quelle {
   font-size:0.75em;
}

.material-icons {
   font-size:10px;
}
/*
Breite und Höhe der Box passend zu <iframe>
Vorgabe youTube
*/
.youTubeBox600 {
   border: 0; /* eindeutig */
   width: 600px;
   height: 336px;
   margin: 2em auto 2em auto
}

/* Umbruch verhindern */
.nobr {
	white-space: nowrap	
}

/*span element */
.markierung {
  /* border-bottom: 1px dotted black; */
   padding: 0 0.2em 0 0.2em;
   background-color: rgb(144, 238, 144, 0.4);
/*   border: 1px solid black; */
 /*  font-weight: bold; */
   background-color: rgb(255, 255, 128, 0.8); 
}

/*span element */
.unterstrich {
   border-bottom:1px solid black;
}