@import "../fonts/font.css";
  @import "../fonts/font_icons.css";

/*===== BASICS =====*/
                body,
                html {
                        margin: 0;
                        padding: 0;
                        height: 100%;
                        width: 100%;
                        scroll-behavior: smooth;  }
                body {
                        font-family: "Barlow", sans-serif;
                        font-size: 120%;
                        line-height: 150%;
                        color: #1a1a1a;
                        hyphens: auto; }
img {
  width:100%;
  max-width: 100%;
  height:auto; }
nav a,
nav a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none; }
a,
a:focus{
  text-decoration: underline; }
section a,
section a:focus{
  color: #476100; }
a:hover {
  color: #1a1a1a; }
i,
span,
a {
  display: inline-block; }
h1,
h2,
h3,
h4 {
  font-weight: bold;
  line-height: 1.5em;
  margin:0;
  padding:0;
  color: #1a1a1a; }
h1 {
  font-size: 2em;
  border-radius: 5px;
  border-top: 3px solid #a6ce3a;
  border-bottom: 3px solid #a6ce3a; }
h2 {
  font-size: 1.6em;
  color: #476100;
  padding-top: 1em; }
h3 {
  font-size: 1.2em; }
h4 {
  font-size: 1em;
  font-weight:bold; }
ul,
ol {
  margin: 0px;
  padding:0.5em 0 1em 0;
  list-style-type: disc;
  list-style-position: inside; }
p,
address,
figure {
  margin: 0px;
  padding:0.5em 0 1em 0; }
figcaption {
  font-size: 0.9em; }

/*===== LAYOUT =====*/
.clear           { clear: both; display: block; overflow: hidden; visibility: hidden; width:0; height:0; }

#wrapper {
    min-height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; }
.breite100 {
    width: 100%;
    margin: 0 auto; }
.breitesite {
    width: 80vw;
    max-width: 1400px;
    margin: 0 auto; }
main {
    padding: 1rem 0;
    height: 200vh;
    background-color:#FFFFFF;
    margin: 3em 0;
    line-height: 180%; }
section {
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding-top:140px;
    border-top:solid 5px #a6ce3a;
    margin-bottom:50px; }
section:first-child {
    border-top:none; }
#datenschutz,
#impressum,
#barrierefreiheit {
    display:block;
    padding-top:50px; }
.links           { float:left; }
.rechts          { float:right; }
.zentriert       { text-align:center; }
.pl              { padding-left:20px; }
.pr              { padding-right:20px; }
.halb            { width: calc(50% - 20px); }


#quicknavi {
     background-color: #1a1a1a;
     color: #FFFFFF;
     height:30px;
     margin:0;
     padding:0 20px; }
#quicknavi a {
     color: #FFFFFF; }
header {
    display: flex;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    background-color:#FFFFFF;
    height:100px;
    box-shadow: 1px 0 2px #1a1a1a; }
.brand {
    float: left;
    padding: 0.5em 1em 0 0.5em; }
.brand a img {
     max-height:80px; }
#headerpic {
  margin-top:100px;
  width:100%; }
#headerpic img {
  border-bottom:solid 5px #a6ce3a; }


/*===== SONSTIGE =====*/
.fixed-top {
   position:fixed;
   top:0;
   left:0;
   right:0;
   z-index:1030; }
.fixed-bottom {
   display: block;
   z-index:5000;
   position:fixed;
   bottom:0;
   right:20px;
   background: rgba(0,0,0,0.75);
   margin:-15px 0 0 10px;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
   border-radius:10px 10px 0 0; }
.fixed-bottom ul {
   list-style:none;
   margin:0;
   padding:10px; }
.fixed-bottom ul li {
   margin-left:0; }
.fixed-bottom ul a {
   text-decoration:none;
   color:#FFFFFF; }
.specialbutton {
    width: calc(100% - 40px);
    background:#a6ce3a;
    height:100px;
    margin-bottom: 20px;
    padding:2em 1em 0;
    border-radius: 5px; }
.specialbutton:hover {
    background:#1a1a1a; }
.specialbutton a {
    display:inline;
    font-size:2em;
    height:100%;
    text-decoration: none;
    color:#000000;
    width:100%;  }
.specialbutton:hover a {
    color:#FFFFFF; }
.gallery {
  display:inline; }
.gallery a {
  display: inline; }
.gallery img {
  width:calc(25% - 10px); }


#referenzen {
  background-color: rgba(0,0,0,0.75) !important;
  color: #FFFFFF;
  border-top:solid 3px #a6ce3a;
  margin:0;  }
#referenzen img {
  width:17%;
  height:auto;
  margin:0 10px; }
footer {
  background-color: #a6ce3a !important;
  margin: 0; }
footer h1,
footer h2 {
     color:#000000 !important; }
footer a,
footer a:focus {
     color:#000000;  }
footer a:hover {
     color:#d4f47d; }
.footer-links {
     display: flex;
     flex-direction: column;
     padding:1em;
     align-items: end;
     background-color:rgba(0,0,0,0.5);
     border-radius: 3px 0px 0px 3px; }
footer .footer-links a,
footer .footer-links a:focus {
     font-weight:bold;
     color:#FFFFFF;
     text-shadow: 1px 0 2px rgba(0,0,0,0.95);
     text-decoration: none; }
.footer-copyright {
     font-size: 0.8em;
     text-align:center;
     border-top:solid 1px #FFFFFF;
     padding:10px;
     margin-top:20px; }



/* #### Formulare #### */
form {
  background:rgba(255,255,255,0.5);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  border-radius: 3px;
  padding:1em; }
input[type="text"],
input[type="email"],
input[type="submit"],
textarea,
form p {
  padding: 10px;
  margin-bottom:2%;
  border-radius: 3px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3), inset 1px 1px 3px rgba(0,0,0,0.3);
  border: 0.5px solid rgba(0,0,0,0.5);  }
input[type="text"],
input[type="email"],
textarea {
  background-color:  ;
  color: rgba(0,0,0,0.95);  }
input[type="text"],
input[type="email"],
textarea,
form p {
  width:calc(100% - 50px); }
form a {
  color:#476100;
  text-shadow:none; }
form a:hover {
  color:#1a1a1a;
  text-shadow:none; }
textarea {
  height:7em; }
input[type="radio"],
input[type="checkbox"] {
  display:inline-block;
  width:25px;
  height:25px; }
input[type="submit"] {
  font-size:1.1em;
  color:#FFFFFF;
  cursor: pointer;
  width: auto;
  border-radius: 3px;
  box-shadow: none;
  background-color: #1a1a1a; }
input[type="submit"]:hover {
  background-color: #476100; }

/*===== MENU =====*/
                nav {
                        margin: 0 auto;
                        width: 100%;
                        height: 5em;
                        text-align: right;
                        position: relative;
                        background: #FFFFFF;
                        border-bottom: 1px solid #FFFFFF;
                        -webkit-transition: all 0.8s ease;
                        -moz-transition: all 0.8s ease;
                        -o-transition: all 0.8s ease;
                        transition: all 0.8s ease; }
                nav ul {
                        margin: 0;
                        padding: 2.1em 0 0 0;
                        height: 100vh;
                        font-size:1.2em; }
                nav ul li {
                        list-style: none;
                        margin: 0;
                        display: inline; }
                nav ul li a {
                        color: #1a1a1a;
                        border-radius: 5px;
                        border-top:solid 3px transparent;
                        position: relative;
                        padding: 0 0 0.5em 0;
                        display: inline-block;
                        text-decoration: none; }
                nav ul.menu li a:hover {
                        color: #a6ce3a;
                        border-top:solid 3px #a6ce3a; }


/*===== Media Queries ======*/
                @media screen and (min-width: 961px) {
                        nav ul.menu {
                                max-height: 20px; }
                        a#nav-m, a.close {
                                display: none; }
                        nav ul li {
                                margin: 0 30px 0 0; }
                }


                @media screen and (max-width: 960px) {
                        .pl              { padding-left:0; }
                        .pr              { padding-right:0; }
                        section .o1      { order:-1; }
                        section .o2      { order:2; }
                        .halb            { width: 100%; }
                        section          { grid-template-columns: 1fr; }

                        /*Formatierung Mobiles Menue*/
                        nav ul {
                                top: 4em;
                                position: absolute;
                                background: #FFFFFF;
                                width: 100%;
                                left: -100%;
                                list-style-type:none;
                                margin: 0;
                                padding: 0;
                                transition:all .6s ease;
                                -webkit-transition:all .6s ease; }
                        nav ul li{
                                display: block;
                                text-align: left;
                                padding: 0em 0.5em;
                                border-bottom: 1px solid #a6ce3a; }
                        nav ul li a {
                                color: #1a1a1a;
                                padding: 1em 0; }
                        nav ul.menu li a:hover {
                                border-bottom: 0;
                                border-top:solid 3px transparent; }

                        /*Hamburger-Icon*/
                        a#nav-m img, a.close img {
                                width: 40px;
                                height: auto;
                                margin-right:20px;
                                margin-top: 20px; }
                        nav > .close,
                        a#nav-m:target {
                                display: none; }

                        a:target ~ ul,
                        a:target ~ .close {
                                display: inline-block; }

                        a:target ~ .close {
                                position: absolute;
                                margin-left: -60px; }

                        a:target ~ ul {
                                left: 0; }
                }