body {
    margin: 0;
    padding: 0;
}

.header {
    display: flex; /* Aktiviert Flexbox für den Header */
    justify-content: space-between; /* Verteilt den verfügbaren Platz: Logo links, Navigation rechts */
    align-items: center; /* Zentriert die Elemente (Logo und Navigation) vertikal */
    position: fixed;
    top: 0;
    padding-left: 20px;
    z-index: 1000;   /* Sorgt dafür, dass er über anderen Elementen liegt */
    width: 100%;
    height: 50px;
    /*
    background-image:url(/hp-test/templates/header2.png);
    background-image:url(/hp-test/templates/header1.png);
    background-size : cover;
    background-repeat: no-repeat;
    background-position: center;
    */
    background-image: linear-gradient(to right, black,white);
   
 }

 .mainpart {
    position: relative;
    margin-top: 80px;
    width: 75%;
    margin-left: 12.5%;
    /*border: 2px solid rgb(3, 32, 101);*/
}

.footer {
    display: flex;
    position: fixed; /* Fixiert den Header am Viewport */
    align-items: center;
    bottom: 0;    
    width: 100%;
    height:5%;
    margin: auto;
    background-image: linear-gradient(to right, rgb(255, 255, 255),rgb(0, 0, 0));
}

.raster01 { 
  height: 600px;
  width:100%; 
  display: grid; 
  grid-template-rows: 800px; 
  grid-template-columns: 60% 40%;
  background-color: rgb(200, 200, 200);
  grid-row-gap: 1%; 
  grid-column-gap: 1%;
}

raster011 { 
  background:white;
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:1; 
  grid-row-end:2;
  /*align-self: center;
  justify-self: center;*/ 
} 
raster012 { 
  background:white; 
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:1; 
  grid-row-end:2; 
} 
raster013 {  /* meldungen */
  background:lightgreen; 
  grid-column-start:3; 
  grid-column-end:4; 
  grid-row-start:1; 
  grid-row-end:2; 
} 
raster014 { 
  background:lightblue; 
  grid-column-start:1; 
  grid-column-end:4; 
  grid-row-start:2; 
  grid-row-end:3; 
}

.matw01 {
  background-color: #f0f0f0; /* Grauer Hintergrund */
  padding: 20px;             /* Innenabstand */
  margin-bottom: 15px;       /* Außenabstand unten */
  margin-left: 100px;
}

.tabelle01 {
width: 42.5%;
font-family: Arial;
font-variant: normal;
font-size: 14px;
position: relative;
top: 20px;
margin-left: 8em;
padding-left: 10px;
padding-top: 0;
padding-bottom: 5px;
/* border: 1px outset rgb(194, 194, 194); */
background-color: rgb(240, 240, 240);
box-shadow: 0 .5em .5em  rgba(150, 150, 150, 0.5);
}

.ausgabetabelle {
position: relative;
display: flex;
justify-content: center;
font-family: Arial;
font-variant: normal;
font-size: 14px;
text-align:left;
top: 6em;
}

.abiausgabetabelle {
position: relative;
display: flex;
justify-content: center;
font-family: Arial;
font-variant: normal;
font-size: 14px;
text-align: left;
}

.meldungen {
position: fixed;
display: flex;
height: auto;
width: 21em;
top: 5px;
margin-left: 4em;
padding-left: 10px;
padding-right: 10px;
background-color: rgb(235, 225, 225);
border-radius: 0.5em;
align-items: center; /* Vertikale Zentrierung */
justify-content: center; /* Horizontale Zentrierung */
z-index: 1200; 
}

h1 {
font-family: Arial;
font-variant: normal;
font-size: 16px;
color: rgb(50, 50, 50);
}

h2 {
font-family: Arial;
font-variant: normal;
font-size: 16px;
color: rgb(50, 50, 50);
padding-left: 1em;
}

p {
  margin-left: 1em;
  color: rgb(0, 25, 89);
  /* width: 500px; */
  /* border: 2px solid rgb(3, 32, 101); */
  padding-left: 10px;
  font-weight:normal;
  font-family:Arial;
  font-size: 14px;
}

h3 {
  color: rgb(0, 0, 0);
  margin: 0;
  font-family: Arial;
  font-size: 14px;
  padding: 10px;
}

.arial-schrift {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
}

/*
button {
    margin-left: 1em;
    padding: .5em .5em;
    padding-left: .5em;
	background: #f1c5c5 linear-gradient(hsl(0 0% 100% /.2), transparent);
	border: thin solid rgb(0 0 0 /.1);
	border-radius: 0.4em 0.4em 0.4em 0.4em;
	box-shadow: 0 .2em 0.4em rgb(0 0 0 /.5);
	color: rgba(255, 255, 255, 0);
	text-shadow: 0 -.05em .05em rgb(0 0 0 /.5);
	font-size: 100%;
    font-weight: bolder;
	line-height: 1.5;
}
*/

button {
  width: 10em;
  margin: 14px;
  padding: 2px;
  background-image: radial-gradient(circle , lightgrey, black);
	border:transparent;
	border-radius: 0.5em;
	box-shadow: 0 .5em 0.5em  rgba(150, 150, 150, 0.5);
	color:rgb(100, 0, 2);
	/*text-shadow: 0 -.05em .05em rgb(0 0 0 /.5);*/
	font-size: 100%;
    font-weight: bolder;
    font-family: Arial, sans-serif;
    font-variant: normal;    
	line-height: 1.25;
}

input {
  width: 8em;
  padding: 5px;
  margin: 3px;
  background-image: radial-gradient(circle , lightgrey, black);
	border:transparent;
	border-radius: 0.5em;
	box-shadow: 0 .5em 0.5em  rgba(150, 150, 150, 0.5);
	color:white;
	/*text-shadow: 0 -.05em .05em rgb(0 0 0 /.5);*/
	font-size: 100%;
    font-weight: bolder;
    font-family: Arial, sans-serif;
    font-variant: normal;    
	line-height: 1.25;
}

nav {
    display: flex;
    /*justify-content: flex-end; /* Schiebt die Navigation nach rechts */
    /* top: .5em; /* Abstand vom oberen Rand */
    background-color: transparent; /* Dunkler Hintergrund */
    /*border: 1px solid rgb(255, 255, 255);*/
}

nav ul {
    list-style-type: none; /* Keine Aufzählungszeichen */
    margin: 0; /* Kein Außenabstand */
    padding: 60px; /* Kein Innenabstand */
    display: flex; /* Flexbox für horizontale Anordnung */
         
}

nav li {
    margin-right: 20px; /* Abstand zwischen den Links */
}

nav a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: rgb(0, 0, 0); /* Weiße Schriftfarbe */
    font-weight: bolder;
    text-decoration: none; /* Unterstreichung entfernen */
    padding: 10px 20px; /* Innenabstand für Links */
    display: block; /* Block-Display für bessere Klickfläche */
}

nav a:hover {
    background-color: #ffffff; /* Hintergrundfarbe beim Hover */
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column; /* Vertikale Anordnung */
    }

    nav li {
        margin-right: 0; /* Abstand zwischen den Links entfernen */
        margin-bottom: 10px; /* Abstand zwischen den vertikalen Links */
    }
}

  hr {
    border: none; /* Entfernt die Standard-Borders */
    height: 1px; /* Definiert die Dicke der Linie */
    background-color: rgb(0, 10, 100); /* Setzt die Farbe der Linie */
    width: 100%; /* Definiert die Breite der Linie */

  }