* {box-sizing: border-box; margin-bottom: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding: 0px;}

header {background-color: transparent;}
body {font-family: Arial; font-size: 1.0em; line-height: 1.3; margin-left: 10px; margin-right: 10px; background-color: transparent; outline: none;}

section {padding: 10px;}
p {margin-left: 0px; font-size-adjust: none; margin-bottom: 0.75em;}
ul {list-style: square; list-style-position: inside; padding-left: 20px;}
ul ul {list-style: disc;}



nav {padding: 0px; margin-top: 10px;}
nav ul {vertical-align: top; background-color: transparent; background-image: linear-gradient(to bottom right,steelblue, gainsboro); padding-top: 10px; padding-bottom: 10px; border-radius: 5px; margin: 0px; text-align: left;font-size: 1.0em; box-shadow: 5px 5px 5px gainsboro;}
nav ul li {display: inline-block; margin-right: 1%; margin-left: 0px; background-color: transparent; vertical-align: top; color:gainsboro ; padding-right: 10px; padding-left: 10px;}
a {padding-left: 0px; padding-right: 0px; margin-left: 0px; background-color: transparent; text-decoration: underline; color: inherit;}
a:hover {color: steelblue;}
#JES {font-size: 2.7em; font-weight: normal; color: steelblue; line-height: 1.0; text-shadow: 5px 5px 6px gainsboro}
#Engineering {font-size: 1.3em; font-weight: normal; color: goldenrod; line-height: 1.0; text-shadow: 5px 5px 6px gainsboro;}

#logo {border: solid grey 2px; border-radius: 5px;}

.flex-container_navigationsleiste {background-color: transparent; display: flex;}
.flex-container {display: flex; flex-wrap: nowrap;}
.flex-container_formular {display: flex; flex-wrap:inherit;}

h1 {font-size: 1.5em; color: steelblue; font-weight: bold; text-decoration: none; text-align: left; background-color: transparent; margin-bottom: 0.5em;}
h2 {font-size: 1.0em; color: black; font-weight: normal; text-decoration: none; text-align: left;}
h3 {font-size: 1.0em; color: steelblue; font-weight: bold; text-decoration: underline; text-align: left; margin-bottom: 00.5em;}
h4 {font-size: 1.2em; color: steelblue; font-weight: bold; text-decoration: none; text-align: left; margin-bottom: 0.5em;}
h5 {font-size: 1.3em; color: steelblue; font-weight: normal; text-decoration: underline; text-align: left; margin-bottom: 0.3em;}
h6 {font-size: 1.3em; color: gainsboro; font-weight: normal; text-align: center; margin-bottom: 0.5em; background-image: linear-gradient(to bottom right, gainsboro, whitesmoke);}


em {color: black; font-size: 1.5em; text-align: center;}
nav a {color: black; font-weight: normal; border: 2px solid transparent; border-radius: 5px; padding-left: 5px; padding-right: 5px; padding-top: 2.5px; padding-bottom: 2.5px; text-decoration: none;}

nav a:hover {border-color: transparent; color: black; background-color: gainsboro;}

.flex-item_links {background-color:transparent; min-width: 200px; width: 20%; margin-right: 20px; margin-top: 7px; min-height: 0px; padding-right: 0px; vertical-align: top;}
.flex-item_rechts {background-color: transparent; width: 100%; min-height: 50px; text-align: center; padding-left: 0px; margin-left: 0%; vertical-align: top;}
.flex_startseite_links {margin-right: 20px; width: 250px; padding: 0px; border-radius: 5px;}
.flex_startseite_mitte {margin-top: 0px; margin-right: 20px; width: 75%; padding: 0px; border-radius: 5px;}
.flex_startseite_rechts {margin-top: 0px; margin-left: 0%; width: 25%; padding: 0px; border-radius: 5px;}
.flex-item2 {background-color: transparent; margin-left: 10px; padding-left: 1em; border-radius: 0em; width: 80%; vertical-align: top;}
.flex-item3 {width: 33%; height: auto; padding: 0px; margin: 0px; background-color: transparent; text-align: left;}

.flex_ueber_mich_links {width: 33%; margin-left: 0px; margin-right: 20px; border-radius: 5px; margin-bottom: 20px;}
.flex_ueber_mich_rechts {width: 67%; margin-left: 10px; margin-right: 0px; border-radius: 5px; margin-bottom: 20px;}
.flex_ueber_mich_rl {width: 50%; margin-left: 0px; margin-right: 10px; border-radius: 5px}
.flex_ueber_mich_rr {width: 50%; margin-left: 0px; margin-right: 0px; border-radius: 5px}

.flex_leistungsumfang_oben {margin-bottom: 5px; font-size: inherit;}
.flex_leistungsumfang_links {width: 33.3%; margin-right: 30px; border-radius: 5px; background-color: transparent;}
.flex_leistungsumfang_mitte {width: 33.3%; margin-right: 30px; border-radius: 5px; background-color: transparent;}
.flex_leistungsumfang_rechts {width: 33.3%; border-radius: 5px; background-color: transparent;}

.flex_kontakt_links {width: 25%; min-width: 250px; height: auto; padding: 0px; margin-left: 0px; margin-right: 2.5%;}
.flex_kontakt_rechts {width: 75%; height: auto; padding: 0px; margin: 0px; display: flex; flex-wrap: wrap;}
.flex_formular_links {margin-right: 5%; flex-wrap: wrap;}
.flex_formular_rechts {margin-right: 0%; flex-wrap: wrap;}


.Eingabefeld {font-size: 1.0em;}

.Zeilenhintergrund_1 {background-color: transparent; padding: none;}
.email {color: blue; font-weight: normal;}
.blau {color: steelblue}
.schwarz {color: black}
.fett {font-weight: bold}
.innenabstand {padding: 10px}
.schatten {box-shadow: 5px 5px 5px gainsboro;}
.hintergrund_gelb {background-color: gold; border-radius: 5px;}
.hintergrund_blau {background-color: steelblue; border-radius: 5px;}
.hintergrund_hellgrau {background-color: whitesmoke; border-radius: 5px;}
.hintergrund_schwarz {background-color: black; border-radius: 5px;}
.hintergrund_hellblau {background-color: lightsteelblue; border-radius: 5px;}
.hintergrund_dunkelgrau {background-color: grey; border-radius: 5px}
.hintergrund_grau {background-color: gainsboro; border-radius: 5px;}
.background_1 {background-image: linear-gradient(to bottom right, gold, whitesmoke);}
.background_2 {background-image: linear-gradient(to bottom right, whitesmoke, white);}
.background_3 {background-image: linear-gradient(to bottom, whitesmoke, white);}
.Breite {width: 30%;}
input {height: 20px; margin-right: 20px; margin-top: 5px; background-color: transparent; border: 1px solid grey;}
.nebeneinander {width: 20px;}
.zentriert {text-align: center;}
.pictogramme {display: block; align-items: baseline; text-align: center; width: 100%; background-color: aquamarine}
.pic_links {height: auto; margin-left: 0px; margin-right: auto; background-color: transparent; color: steelblue;}
.pic_mitte {height: auto; margin-left: auto; margin-right: auto; background-color: transparent; color: steelblue;}
.pic_rechts {height: auto; margin-left: auto; margin-right: 0px; background-color: transparent; color: steelblue;}

.pic_hintergrund {background-color: gold; padding: 2px}

.Farbverlauf_Grau {background-image: linear-gradient(to bottom right, gainsboro, white)}
.Farbverlauf_Gelb {background-image: linear-gradient(to bottom right, gainsboro, white)}
.Farbverlauf_Schwarz {background-image: linear-gradient(to bottom right, black, gainsboro);}
.Farbverlauf_Blau {background-image: linear-gradient(to bottom right, lightsteelblue, white);}
.Farbverlauf_Mist {background-image: linear-gradient(to bottom right, black, steelblue);}
.Farbverlauf_TBD {background-image: linear-gradient(to bottom right, steelblue, lightsteelblue);}

form {text-align: left;}
label {line-height: 1.0em; font-size: 1.0; margin-bottom: 20px;}
#submit {color:gold; background-image: linear-gradient(to bottom right, black, steelblue); font-size: 1em; font-weight: normal; border: 1px solid black; border-radius: 5px; padding: 5px; margin-right: 20px;}
#reset {color: steelblue; background-image: linear-gradient(to bottom right,gainsboro, whitesmoke); font-size: 1em; border: 1px solid black; border-radius: 5px; padding: 5px;}
#submit:hover {cursor: pointer;}
#reset:hover {cursor: pointer;}

#mist{background-color: transparent; margin-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 5px; border-radius: 0px;}
  #mist_links {width: auto; overflow-x: hidden;}
  #mist_rechts {width: auto; overflow-x: hidden;}

@keyframes Slide_Zeile_1{
0% {transform: translateX(-100%);} 
0% {transform: translateX(-100%);}
100% {transform: translateX(0%); text-align: left;}
}

@keyframes Slide_Zeile_2{
0% {transform: translateX(-100%);} 
0% {transform: translateX(-100%);}
100% {transform: translateX(5%); text-align: left;}
}

@keyframes Slide_Zeile_3{
  0% {transform: translateX(-100%);} 
  0% {transform: translateX(-100%);}
  100% {transform: translateX(10%); text-align: left;}
  }

  @keyframes Slide_Zeile_4{
    0% {transform: translateX(-100%);} 
    0% {transform: translateX(-100%);}
    100% {transform: translateX(15%); text-align: left;}
    
    }

#Zeile_1 {font-weight: normal; font-size: 0.8em; color: gainsboro; padding-left: 0px; animation-name: Slide_Zeile_1; animation-duration: 1.5s; animation-fill-mode: forwards; margin: 0px;}
#Zeile_2 {font-weight: bold; font-size: 1.2em; color: gold; padding-left: 0px; animation-name: Slide_Zeile_2; animation-duration: 1.5s; animation-fill-mode: forwards; margin: 0px;}
#Zeile_3 {font-weight: normal; font-size: 0.8em; color: gainsboro; padding-left: 0px; animation-name: Slide_Zeile_3; animation-duration: 1.5s; animation-fill-mode: forwards; margin: 0px;}
#Zeile_4 {font-weight: bold; font-size: 1.2em; color: gold; padding-left: 0px; animation-name: Slide_Zeile_4; animation-duration: 1.5s; animation-fill-mode: forwards; margin: 0px;}


figure {text-align: left; padding: 0px; margin: 0px}
figcaption {margin-bottom: 10px;}
#liste_startseite {background-color: transparent; font-size: 1.0em; color: grey;}
#aktuell a {color: white; border-color: transparent; background-color: transparent; font-weight: normal; text-decoration: none;}
/*schlagworte ul li {display: inline-block; text-align: center; margin-left: 5%; margin-right: 5%;}
schlagworte ul {text-align: center;}*/

ul {list-style: square;}
ul ul {list-style: circle;}
hr {height: 4px; background-image:linear-gradient(to right, goldenrod, gold); border: none; margin-top: 10px;}

.Eingabefeld {padding: 5px}
textarea {padding: 5px}


/*Bildwechsler*/

.banner {font-size: 1.0em; background-color: transparent; padding: 5px;}
#banner_1 {color: steelblue; font-size: 1.0em;}
#banner_2 {color: steelblue; font-size: 1.3em;}
#banner_3 {color: black;}
#banner_4 {color: black;}
#banner_5 {color: black;}

#gallery {
  width: 100%;
  height: 200px; 
  vertical-align:text-bottom;
  margin: 0 auto;
  overflow: hidden;
    /*background-image: linear-gradient(to bottom right, grey, gainsboro);*/
    background-color: transparent;
    /*box-shadow: 5px 5px 5px gainsboro;*/
    margin-left: 0px; margin-right: 0px;
    text-align: left;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
     
}

#gallery .banner {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0px;
  height: 10px;
}

#gallery:hover .banner {
  animation-play-state: paused;
}

#gallery .banner {
  animation: slide 10s infinite ease-in-out; height: 100%;
}

/*@media only screen and (max-width: 768px) { 
  #gallery {
    height: 5em;
  }
}*/

@keyframes slide {
    0%   {top: 0}
    30%  {top: 0}
    60%  {top: -100%}
    90%  {top: -100%}
    100% {top: 0}
}


#mist {transform: scale(1);
}


/*Details auf Startseite*/

#schliessen {text-align: right; display: none;}

details {background-color: transparent; margin-left: 0px; margin-right: 0px;
}

details summary {
    background-color: transparent; font-size: 1.2em; color: black; font-weight: normal;
}

details p {
    background-color: transparent; padding-left: 25px; padding-right: 5px; font-size: 1em; color: dimgrey; 
}
details ul {
    background-color: transparent; padding-left: 40px; font-size: 1em; color: dimgrey;
}
    
summary:focus {outline: none;}
summary:hover {outline: none; cursor: pointer; text-decoration: underline; color: steelblue;}
summary:active {outline: none;}

details[open] {
  /*background-image: linear-gradient(to bottom right, gainsboro, whitesmoke)*/
  margin-bottom: 1em; padding-top: 5px; padding-bottom: 5px;
  /*box-shadow: 5px 5px 5px gainsboro;*/
}



details[open] summary {
    margin-bottom: 5px; padding-left: 5px;
}


summary::-webkit-details-marker,
summary::marker { 
  color: red; content: normal;
}





/*Responsives Design für mobile Geräte im Hochformat*/

@media only screen and (max-width: 768px)
{
    nav ul {background-color: transparent; padding: 0px; margin-top: 0px; background-image: none;}
    nav ul li {display: block; margin-bottom: 5px; border-radius: 5px; border: transparent; padding: 5px; background-image: linear-gradient(steelblue, lightsteelblue);}
    
    #aktuell {color: steelblue; border-color: transparent; background-color: gold;}
    .flex-container_navigationleiste {flex-wrap: nowrap;}
    .flex-container {flex-wrap: wrap;}
    .flex-container_formular {flex-wrap: wrap;}
    .flex_startseite_links {width: 100%; display: flex; margin-bottom: 10px; margin-right: 0px; height: auto}
    .flex_startseite_mitte {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 10px;}
    .flex_startseite_rechts {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 10px;}
    .flex_ueber_mich_links {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 30px;}
    .flex_ueber_mich_rechts {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 30px;}
    .flex_ueber_mich_rl {width: 100%; margin-left: 0px; margin-right: 10px; border-radius: 5px}
    .flex_ueber_mich_rr {width: 100%; margin-left: 0px; margin-right: 0px; border-radius: 5px}
    .flex_leistungsumfang_links {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 10px;}
    .flex_leistungsumfang_mitte {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 10px;}
    .flex_leistungsumfang_rechts {width: 100%; flex-wrap: wrap; margin: 0px; margin-bottom: 10px;}
    .flex_kontakt_links {width: 100%; flex-wrap: wrap; margin-bottom: 30px; margin-right: 0px;}
    .flex_kontakt_rechts {width: 100%; flex-wrap: wrap; margin-bottom: 30px;}
    .flex-item6 {flex-wrap: wrap;}
    .flex_formular_links {flex-wrap: wrap;}
    .flex_formular_rechts {flex-wrap: wrap;}
    
    .bewerbungsbild {margin-right: 20px; height: auto}
    .beschreibung {width: 100%; margin: 0px}
   
    #gallery {height: 266.75px;}
    nav a:hover {border-color: transparent; color: black; background-color: transparent;}
    
 }