 body{margin:0;padding:0;width:100%;height:auto;}
 <style media="screen">
/*Anfang css*/
body{margin:0; padding:0;width:100%;height:auto;background-image: repeating-linear-gradient(135deg, rgba(16,114,186,0.5),rgba(16,114,186,.25) ,rgba(16,114,186,0) 6px);background-color:#9acd32;font-size:1.1em;}
a{margin:3px 2.5px;}
a[href=''],a[class='faq_title']{cursor:pointer;}
header h2, header p{color:#f2f2f2;}
main h1,main h2,main p{color:#aaa;font-size:1.25em;}
main h1{color:#1072ba;text-align:center;}
main .text_follow h1{margin:auto;width:auto;text-align:left;}
.content{display: flex;justify-content: space-around; }
.content p a{color:#1072ba;}
.content a{text-decoration: none;color:#1072ba;}
.content a:hover{color: #9acd32;}
.content a[href='']:active{color: #1072ba;text-shadow: 1px 1px #9acd32}
.content .rechner_wsite{min-width: 300px; width: auto;max-width:60%;}
.zins a:after{margin-left:5px;content: '\203A\203A\203A';color:#9acd32;}
.zins a:hover:after{width:auto;color:#1072ba;}
header{display:flex;flex-direction:column;width: 100%;height: auto;}
header nav{position:fixed;top:0;width: 100%;height:auto;border-bottom:1px solid #aaa;background-color: #fff;z-index:10;}
header nav ul{display: flex;flex-direction:row;margin:0;padding:0;width:100%;height:auto;background-image: linear-gradient(90deg, rgba(16, 114, 186, 1) 0%, rgba(16, 114, 186, 0.75) 25%, rgba(16, 114, 186, .5) 50%, rgba(16, 114, 186, .25) 75%, rgba(16, 114, 186, 0) 100%);
    background-color: #9acd32;}
header nav ul li{display:flex;flex-direction:column;padding: 0;width:100%;height:auto;justify-content:space-around;align-items:center;list-style: none;cursor: none;font-size: 1.0em;border-bottom: 1px inset #1072ba;}
header nav ul li a{display:flex;width: 100%;height:100%;justify-content: space-around;align-items: center;}
header nav ul .list_title{margin-bottom:0;}
header nav ul li .list{position:absolute;top:50px;display:none;flex-direction:column;width:20%;height:auto;background-color: #1072ba;filter:drop-shadow(2px 4px 6px #000);}
header nav ul li ul li:hover{background-color: #fff;color:#1072ba;}
header nav ul li ul li:active{background-color:rgba(255,255,255,0.5);color:#fff;}
header nav ul li ul li:hover a{color:#1072ba;}
header nav ul li ul li:active a{color:#fff;}
header nav ul li ul li{display:flex;flex-direction:column;margin:0;padding:0 2%;width: 96%;justify-content:flex-start;font-size: 1.0em}
header nav ul li ul li a{width:100%;height:100%;text-align: center;color:#fff;}
header nav ul li a{text-decoration: none; color:#fff;}
header nav ul li:hover{height:auto;background-color:#1072ba;cursor: pointer;}
header nav ul li:hover .list1{display: flex;left:20%;}
header nav ul li:hover .list2{display: flex;left:40%;}
header nav ul li:hover .list3{display: flex;left:60%;}
header nav ul li:hover .list4{display: flex;left:80%;}
header nav ul .off{background-color: #fff;}
header nav ul .off a:active{filter: opacity(0.75);}
header nav ul .off:hover{background-color:#fff;}
header nav ul .off a:hover img{filter: drop-shadow(1px 1px 1px #aaa);}
header nav ul li:hover a {color:#fff;}
header nav ul li img {margin:0;padding:0;width: auto;height:50px;}
header section{display:flex;flex-direction:row;padding-top:50px;min-width: 320px;width:auto;max-width: 100%;justify-content:space-around;}
header section .image{display:flex;margin:0;padding: 0;min-width:25em; width: auto;max-width:29%;height:auto;align-items: center;}
header section .image img{margin: 0 auto;width:100%;height:225px;filter:drop-shadow(2px 4px 6px black);}
header section .content{display: flex;padding:0 10%;width:80%;min-height:225px;flex-flow:column wrap;justify-content: center;align-items: flex-start;color:#062d49;font-size:1.3em;background-image: linear-gradient(90deg,rgba(16,114,186,1)0%,rgba(16,114,186,0.75)25%,rgba(16,114,186,.5)50%,rgba(16,114,186,.25) 75%,rgba(16,114,186,0) 100%);background-color:#9acd32;}
header section .content h2{margin:0;width:100%;font-size:0.95em;}
header section .content p{margin:0;padding:0;width:100%;}
header .title {padding:0;background-color: #1072ba;filter:drop-shadow(2px 4px 6px black);}
header .title h1{display:flex;margin:5px auto;width:80%;height:auto;justify-content:space-around;align-items:center;text-align: center;color:#fff;font-size: 1em;}
header .content p a{color:#fff;font-weight:900;text-decoration:underline;}
header .content p a:hover{text-shadow:1px 1px #000;color:#1072ba;}
main {display: flex;flex-direction: row;margin:0;padding:0;width:auto;width:100%;height:auto;justify-content: space-around;background-image: linear-gradient(90deg,rgba(16,114,186,1)0%,rgba(16,114,186,0.75)25%,rgba(16,114,186,.5)50%,rgba(16,114,186,.25) 75%,rgba(16,114,186,0) 100%);background-color:#9acd32;border-bottom:1px solid #fff;}
main aside{padding:1% 0;min-width:25em;width:auto;max-width:29%;height:auto;background-color: #f8f8f8;background-image:linear-gradient(90deg,rgba(16,114,186,1)0%,rgba(16,114,186,.5) 0.25%,rgba(16,114,186,0) 5%)}
main aside .zins div{display:flex;flex-direction:column;width:100%;}
main aside .zins div a{margin:10px 0;font-size:1.25em;}
main aside .content{margin: 0 auto 25px;}
main aside .content article{width: 90%;height:auto;}
main aside .content .list{padding-left: 0px;}
main aside .content .list li{margin:10px auto;font-size:1.25em;}
main aside .content ul li{width:100%;list-style-type: none;}
main aside .content ul li:before{margin-right:5px;content: '\002B';color:#9acd32;}
main aside .content ul li:hover:before{color:#062d49;}
main aside article #kontakt{display: none;width: 100%;justify-content:center;background-color: red;}
main aside header{display: flex;padding:0;justify-content: center;}
main aside header h2{width:100%;height:auto;color:#9acd32;font-size:1.0em;}
main section{display:flex;flex-direction:column;margin:0 0 0 0.25%;padding:25px 0.1%;width: 99.5%;height:auto;background-color: #fff; }
main section h2{color: #444;}
main section p{color: #888;font-size: 1.2em;}
main section .content{display:flex;margin:auto;padding:1%;width:98%;height:100%;justify-content:flex-start;background-color:#fff;}
main section .baufilead_special{margin:0 auto;padding:0;width:100%;background-color: #fff;}
main section .rechner_tools{display:flex;padding-top:25px;flex-direction:column;width:auto;justify-content:center;align-content: flex-start;border-top: 1px solid #aaa;}
main section .rechner_tools p,main section .rechner_tools h4{margin:2.5px 0;width:320px;}
main section .zins{display: flex;flex-flow:row wrap;padding:2.5%;min-width:100%;width: auto;justify-content:space-around;align-items: flex-start;}
main section .zins a{margin:2.5px auto;width:100%;font-size: 1.5em;}
main section .zins .baufilead_zinstableau{display:flex;flex-flow:column wrap;margin:5% 0;padding:5% 2.5%;min-width:320px;width:auto;max-width:40%;height:auto;background-color: #f2f2f2;filter: drop-shadow(5px 5px 3px #aaa);}
#baufilead-zinstableau-container-0, #baufilead-zinstableau-container-1, #baufilead-zinstableau-container-2, #baufilead-zinstableau-container-3, #baufilead-zinstableau-container-4, #baufilead-zinstableau-container-5{background-color: #f8f8f8;}
footer{margin-top:0;width:100%;height: auto;background-color:#1072ba;color: #fff}
footer article{padding:25px 0;}
.zertifikat{display:flex;flex-direction:column;margin:25px auto;padding:0;min-width:300px;width:auto;max-width:100%;height:auto;justify-content:center;align-items:center;}
.zertifikat img{width:auto;height:50px;}
.zertifikat h3{margin:1.25em 1.0em;min-width:18.0em;width:auto;font-size:1.0em;color:#fff;}
.zertifikat .image{display:flex;flex-flow:row wrap;width:90%;height:auto;justify-content:space-around;}
.zertifikat .image img{width:auto;height:100px;filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));}
footer .content a{display:flex;align-items:flex-end;color:#fff;font-size:0.9em;}
footer #localbox{display:none;}
footer #localbox h3{font-size:0.85em;}
footer #localbox a{margin:10px;font-size:1.25em;}
footer .footer_bottom{display:flex;flex-direction:column;width:100%;justify-content:center; }
footer .footer_bottom p{margin:10px 5px;}
footer .footer_bottom .content{display:flex;flex-direction:column;margin:20px auto;width:100%;justify-content: center;text-align: center;}
footer .footer_bottom .content .mobile{display:none;flex-direction: row;justify-content: center;}
footer .footer_bottom .content .desktop{display:flex;justify-content: center;align-items:flex-end;}
.media_box{display:flex;flex-flow:row wrap;margin:auto 0;min-width:320px;width:auto;max-width:90%;justify-content:center;}
.media_box_content{display: flex;flex-direction: column;margin:5px;width:320px;eight:auto;justify-content:center;}
.media_box_content iframe{width:320px;height:150px;filter: drop-shadow(  5px 5px 3px #aaa);}
.media_box_content p{display:flex;flex-direction:row;width:100%;justify-content:space-around;text-align:center;}
.media_box_content img{margin: -6% auto;width:100%;height:auto;filter: drop-shadow(  5px 5px 3px #aaa);}
#assurance p{display:flex;flex-direction:row;width:100%;justify-content:space-between;text-align:left; font-size: 1.5em}
#grund_schulden li {list-style: none;width: 90%;}
#grund_schulden li div{display: flex; align-items: center;justify-content: space-between;margin: 5px 0;padding: 2px 0;list-style: none;width:100%;height:50px; background-image: linear-gradient(90deg,rgba(16,114,186,1)0%,rgba(16,114,186,0.75)25%,rgba(16,114,186,.5)50%,rgba(16,114,186,.25) 75%,rgba(16,114,186,0) 100%); background-color: #9acd32;}
#grund_schulden p{color: #fff;font-size: 1em;}
#grund_schulden .gs_1{width:100%;}
#grund_schulden .gs_2{width:84.16%;}
#grund_schulden .gs_3{width:66.83%;}
#grund_schulden .gs_4{width:65.35%;}
#grund_schulden .gs_5{width:44.06%;}
#calc_risk div{display: flex;flex-direction: column; min-width: 320px;width: auto; max-width: 90%;}
#calc_risk div div{display: flex;flex-direction: row;justify-content: space-between;min-width:320px;width: auto;max-width: 100%;}
.calc_result{border-top:1px solid #aaa;}
#calc_risk div .calc_info{font-size: 0.9em;}
#calc_risk div .calc_number{font-weight: 900;}
#calc_risk div #diagram {display: flex; flex-direction: column; width: 100%;}
#calc_risk div #diagram div{display: flex; flex-flow: row wrap;justify-content: space-around; width: 100%; margin: 2px 0;height: auto;}
#calc_risk div #diagram .dgk_1 .calc_balken p, #calc_risk div #diagram .dgk_2 .calc_balken p{justify-content: flex-end;width:100%;background-color: #1072ba;}
#calc_risk div #diagram .dgk_2 .calc_balken p{background-color: rgba(16,114,186,.85)}
#calc_risk div #diagram div .text{width: 320px;height: auto;font-size: 1em;}
#calc_risk div #diagram div .calc_balken{display: flex; flex-direction: row;justify-content: space-between;min-width: 320px;width:auto;max-width: 100%;height:40px;background-color: #fff;}
#calc_risk div #diagram div .calc_balken p{display:flex;margin:0;padding:0 5px; align-items: center;color: #fff;}
#calc_risk div #diagram div .calc_balken .right{justify-content: flex-end;}
#calc_risk div #diagram .dgk_3 .calc_balken .left{width:65%; background-color: rgba(16,114,186,0.6)}
#calc_risk div #diagram .dgk_3 .calc_balken .right{width:28%; background-color: rgba(154,205,50,0.6);}
#calc_risk div #diagram .dgk_4 .calc_balken .left{width:50%; background-color: rgba(16,114,186,0.5)}
#calc_risk div #diagram .dgk_4 .calc_balken .right{width:43%; background-color: rgba(154,205,50,0.7);}
#calc_risk div #diagram .dgk_5 .calc_balken .left{width:35%; background-color: rgba(16,114,186,0.4)}
#calc_risk div #diagram .dgk_5 .calc_balken .right{width:58%; background-color: rgba(154,205,50,0.8);}
#calc_risk div #diagram .dgk_6 .calc_balken .left{width:25%; background-color: rgba(16,114,186,0.3)}
#calc_risk div #diagram .dgk_6 .calc_balken .right{width:68%; background-color: rgba(154,205,50,0.9);}
.listelem{display:flex;align-items:flex-start;}
.listelem:before{position:relative;top:-8px;padding-right: 10px;content: '\21B3';color: #9acd32;font-size:1.5em;}
.listelem strong{margin:0 5px;}
#proIframeWrapper {
height: 0px;
overflow: hidden;
height: auto;
margin-left: auto;
margin-right: auto;
/* NEU : */
padding-bottom: 100px;
}
#proIframeWrapper #proIframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.info img{margin-bottom:25px;}
.info{display:flex;flex-direction:column;margin:auto;width:100%;}
.datenschutz .info, .impressum{display: flex;flex-direction: column;}
.datenschutz .info, .impressum .info{margin:0;width: 90%;}
.info .info_box{display:flex;flex-direction:column;margin-bottom:5px;width:100%;font-size:1.25em;color:#aaa;}
.info .info_box img{width:200px;height:auto;}
.info .info_box div{display:flex;flex-direction:row;width:auto;}
.info .info_box > p, .info .info_box > h3, .info .info_box > div{margin:2.5px 0;padding: 0;width:auto;height:auto;text-align:left;}
.info .info_box div p{margin:0;}
.info .info_box div a{margin-top:25px;font-size:1.0em;}
.info .info_box div .info_content{width:100px;font-weight:bold;}

.special{
  display:flex;
  flex-direction:column;
  margin:auto;
  font-size:1.0em;
 }
 .special:after{margin: 25px auto;content:url("https://baufinanzierung-vergleich-online-24.de/image/trennlinie.png");}
  .content_box{
    display:flex;
    flex-direction:column;
    margin:10px auto;
    width:75%;
    justify-content:center;
  }
  .content_box h2{color:#062d49;}
  .content_box h3{margin:25px 0 0 0;width:95%;text-align:left;color:#1072ba;font-size:1em;}
  .content_box h4{margin-bottom:0;}
  #cert_box .image{display:flex;justify-content:center;}
  #cert_box h1{margin:0 auto;width:100%;}
  #cert_box h3{text-align:center;}
  #cert_box img{width:25%;height:auto;}
  .text_follow  h1:after{margin-left:2px;content:'...';color:#9acd32;)}
  .content_box p{display:block;margin:10px 2.5%;text-align:left;line-height:1.25em;}
  .text_follow .baufi_wir p:before{margin-right:2px;content:'✓ ...';color:#9acd32;}
  .text_follow div div p:before{content:'';)}
  .text_follow  p:before{margin-right:2px;content:'...';color:#9acd32;}

  .servicebox{display:flex;flex-flow:row wrap;margin-top:50px;width:100%;height:auto;justify-content:space-around;align-items:flex-start;align-content:space-around}
  .servicebox div{display:flex;flex-flow:row wrap;margin:25px 2.5%;padding:0 5px 10px;min-width:250px;width:auto;max-width:20%;height:auto;justify-content:center;align-items:center;border-radius:10px;}
  .servicebox div article{display:flex;flex-direction:column;padding:5px;width:100%;height:auto;justify-content:center;background-color:transparent;color:#000;filter: drop-shadow(  5px 5px 3px #aaa);}
  .servicebox div article h2, .servicebox div article p{margin:5px 0;width:100%;text-align:center;font-size:1.0em;}
  .servicebox div img{margin:10px 0;width:auto;height:125px;filter: drop-shadow(  5px 5px 3px #888);}
  .servicebox .imgbox{display:flex;flex-flow:row wrap;margin:10px 0px;padding:0;width:100%;height:125px;justify-content:center;align-content:center; align-items:center;}
  .servicebox .imgbox img{margin:1px;padding:0 5px;width:auto;height:125px;}
  .servicebox .flag{display:flex;flex-flow:row wrap;margin:10px 0px;padding:0;width:auto;height:auto;justify-content:center;align-content:center; align-items:center;}
  .servicebox .flag img{margin:1px;width:48%;height:62.5px;}

  .toolbox{
    display:flex;
    flex-flow:row wrap;
    margin:auto;
    width:100%;
    justify-content:space-around;
  }
  .tool_special {display:flex;width:auto;height: auto;justify-content: center;}
  .toolbox a{display:flex;margin:1.0%;width:250px;height:auto;justify-content:space-around;box-shadow:1px 1px 1px 1px transparent;border-radius: 50px;}
  .toolbox a .toolbox_container{display:flex;flex-direction:column;padding:10px 0;width:100%;justify-content:flex-start;align-items:center;background-color:transparent;border-radius: 50px;}
  .toolbox a .toolbox_container p{width:auto;height:auto;font-size: 1.3em;}
  .toolbox a:hover .toolbox_container{background-color:transparent;}
  .toolbox a:hover p{color:#1072ba;filter:drop-shadow(2px 2px 2px #fff);}
  .toolbox a:active p{color:#1072ba;filter:drop-shadow(2px 2px 2px #888);}
  .toolbox a img{margin:5%;width: 75%;max-width:150px;height:auto;filter:drop-shadow(3px 5px 3px #aaa) grayscale(0%);}
  .toolbox a:hover img{filter: drop-shadow(3px 5px 3px #9acd32) grayscale(50%);}
  .toolbox a:active img{filter:opacity(0.5) drop-shadow(2px 2px 2px #aaa);}
  .toolbox p{display:flex;margin:0;padding:2%;width:96%;height:100%;align-items:center;background-color:transparent;text-align:center;filter:drop-shadow(5px 5px 3px #eee);font-size:1.0em;color:#000;}

  .content_box .stimmenbox{margin:25px auto;width:90%;}
  .content_box .stimmen{display:flex;flex-flow:row wrap;margin-bottom:25px;justify-content:flex-start;}
  .content_box .stimmen p{display:flex;margin:0;min-width:250px;width:auto;max-width:100%;}
  .content_box .stimmen p:before{margin-right:50px;width:50px;content: "\2605 \2605 \2605 \2605 \2605";color: #9acd32;text-shadow: 1px 0px #aaa;font-size:1.1em;}

  .ortsliste{display: flex;flex-flow:row wrap;margin:auto;padding:0;min-width:15em;width:auto;max-width:97%;justify-content:center;}.ort{margin:5px;width:auto;height:auto;}
    .footer_middle{display:flex;flex-flow:row wrap;width:auto;max-width:100%;justify-content:center;}
    .footer_middle .order1{order:3;min-width:320px;width:auto;}
    .footer_middle .order2{order:1;min-width:320px;width:auto;width: 90%;}
    .footer_middle .order3{order:2;min-width:320px;width:auto;}

  .sitemap{display: flex;flex-flow: row wrap;width: 100%;justify-content:space-around;color:#000;}
  .sitemap_content{display: flex;flex-direction: column;min-width:260px;width: auto;}
  .sitemap_box{display:flex;flex-direction:column;width:auto;justify-content:flex-start;}
  .sitemap_box p{display:flex;width:100%;margin:0 auto;padding:0;font-size:1.0em;color:#1072ba;}
  .sitemap_box p:before{padding-right:10px;content:'\21B3';color: #9acd32}
  .sitemap_box p:hover:before{color: #1072ba}
  .sitemap_box strong{color:#aaa;}
  .sitemap h4{color:#1072ba;border-bottom: 1px solid #888;}
  .sitemap .img_box{display:flex; flex-flow:row wrap;}
  .sitemap .img_container{display:flex;flex-direction:column;margin:5px;padding:2.5px;width:125px;height:100px;justify-content:center;}
  .sitemap img{margin:auto;width:75px;height:auto;filter:drop-shadow(3px 3px 3px #888);}

@media only screen and (max-width:1280px){
  h1,h2,p{font-size: 0.9em}
  header nav ul li ul li{font-size: 1.0em}
}
@media only screen and (max-width:800px){
  header section{flex-direction: column}
  header section .image{margin:0;min-width:20em;max-width:100%;}
}
@media only screen and (max-width:800px){
  html{margin:0;background-color:#fff;}
  main{padding-bottom:0;font-size:0.8em;flex-direction:column-reverse;width: 100%;}
  main .content_box{margin:10px auto;width:100%;}
  main section{min-height:0;}
  main aside{font-size:1.1em;}
  header nav ul{flex-direction:column;width:100%;}
  header nav ul li{margin:5px auto;}
  header section{flex-direction: column}
  header section .image{width:100%;}
  header section .content{margin:auto;padding:5%;min-height:0;width:auto;font-size: 1.0em;}
  header section .image img{height:300px;}
  header nav ul li:hover .list{display: none}
  main aside{min-width:100%;}
  footer .footer_bottom .content .mobile{display:flex;font-size:1.25em;}
  footer .footer_bottom .content .desktop{display:none;}
}
@media only screen and (max-width:600px){
header section .image img{height:250px;}
}
@media only screen and (max-width:400px){
header section .image img{height:200px;}
}

  @media only screen and (max-width:700px){
    .toolbox a{display:flex;margin:1.5%;width:150px;}
    .chain a {justify-content:flex-end;}
    .chain a p{font-size:0.5em;}
  }
  @media only screen and (max-width:650px){
    .toolbox a{display:flex;margin:2.5%;width:auto;}
  }
 </style>
