@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: "Alegreya","SourceSansPro",  sans-serif;
                        font-size: 130%;
                        line-height: 180%;
                        color: #4c4a3f;
                        hyphens: auto; }

img {
  width:100%;
  max-width: 100%;
  height:auto; }
input:focus,
textarea:focus,
button:focus {
  text-decoration: none; }
a,
a:focus{
  text-decoration:underline;
  color: #046300;
  font-weight:bold; }
a:hover {
  color: #143974; }
i,
span,
a {
  display: inline-block; }
h1,
h2,
h3,
h4 {
  font-weight: bold;
  line-height: 1.5em;
  margin:0;
  padding:0.25em 0;
    }
h1 {
  font-size: 2em;
  color: #143974;
  hyphens: none; }
h2 {
  font-size: 1.6em;
  color: #143974; }
h3 {
  font-size: 1.2em; }
h4 {
  font-size: 1em;
  font-weight:bold; }
ul, ol {
  padding-left: 0.5em;
  padding-right: 0.5em;
  list-style-type: disc;
  list-style-position: inside;  }
li {
  padding-right: 1em; }
p, address {
  font-size: 1em;
  line-height: 1.5em;
  margin: 0px;
  padding:0 0 0.5em 0; }
hr {
   color: #ffbc3a; }


/*===== 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%; }
header {
    box-shadow: 1px 0 3px rgba(0,0,0,0.75); }
main {
    margin-top:100px; }
section {
  border-bottom:solid 3px #ffbc3a;
  padding: 1em; }
section:last-child {
  border-bottom:none; }
.breite100 {
  width: 100%;
  margin: 0 auto; }
.breitesite {
  width: 80vw;
  max-width: 1200px;
  margin: 0 auto; }
.links           { float:left; }
.rechts          { float:right; }
.zentriert       { text-align:center; }
.grid            { display:grid; grid-template-columns: 1fr 1fr; justify-content:space-between; }
ul.grid          { list-style-position: outside; }
.p50lr           { padding-left:50px; padding-right:50px; }
.pl              { padding-left:20px; }
.pr              { padding-right:20px; }
.halb            { width: calc(50% - 20px); }
.bg-weiss        { background-color: #FFFFFF !important; }
.bg-bright       { background-color: #eceae4 !important; }
.bg-dark         { background-color: #4c4a3f !important;  }
.bg-schwarz      { background-color: #000000 !important; }

header {
    position: fixed;
    width: 100%;
    background-color:#FFFFFF;
    height:110px;
    box-shadow: 1px 0 2px #4c4a3f; }
.brand {
    float: left;
    padding: 0.5em 1em 0 0.5em; }
.brand a img {
     max-height:90px; }


/*===== SONSTIGE =====*/
.signatur {
     font-family: 'NothingYouCouldDo', cursive;
     font-size:1.3em; }
#pic {
     margin-top:100px;
     width:100%;
     text-align:center; }
#quicknavi {
     background-color: #000000;
     color: #FFFFFF;
     height:37px;
     margin:0;
     padding:0 20px;
     font-size:0.9em; }
#quicknavi a {
     color: #FFFFFF; }
#about,
#leistungen,
#rezept,
#ueberweisung {
     padding-top:140px; }
#newsletter  {
     border-top:solid 3px #ffbc3a;  }
.doclib {
     position:fixed;
     z-index:20000;
     top:120px;
     right:0;
     display:block;
     text-align:right;
     box-shadow: 1px 2px 3px rgba(0,0,0,0.5);
     background-color: #143974;
     color: #FFFFFF;
     overflow:hidden;
     border-radius:35px 0 0 35px;
     text-decoration:none;
     padding:10px 20px;
     line-height:1;}
.doclib:hover {
     background-color: #ffbc3a; }
img.auto {
     width: auto;
     max-width:auto; }
.box {
     border-radius:5px;
     background: #325FA6;
     padding-left:30px;
     border: solid 1px #325FA6;
     margin-bottom:1em; }
.box div,
.box p,
.box ul,
.box h2,
.box h3,
.box h4 {
     padding:0 0.9em;
     margin:0;
     background-color: #FFFFFF; }
.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:10px;
   background: rgba(0,0,0,0.75);
   margin:-15px 0 0 10px;
   box-shadow: 1px 1px 3px rgba(255,255,255,0.3);
   border-radius:10px 10px 0 0; }
.fixed-bottom ul {
   list-style:none;
   margin:0;
   padding:10px; }
.fixed-bottom ul li {
   margin-left:0;
   padding-right:0; }
.fixed-bottom ul a {
   text-decoration:none;
   color:#FFFFFF; }
footer {
  color: #FFFFFF;
  margin: 0; }
footer h1,
footer h2 {
     color:#FFFFFF;  }
footer a,
footer a:focus {
     font-weight:bold;
     text-decoration:underline dotted;
     color:#8bff6b; }
footer a:hover {
     color:#6aa1f7; }
.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-copyright {
     font-size: 0.8em;
     text-align:center;
     border-top:solid 1px #FFFFFF;
     padding:10px;
     margin-top:20px; }



/* #### Formulare #### */
form {
  padding:20px;
  width:calc(100% - 10vw);
  border-radius:5px;
  margin-left:auto;
  margin-right:auto;
  color: #000000;  }
fieldset {
  border:none; }
form label {
  display:inline-block;
  width: 20%; }
input[type="text"],
input[type="email"],
input[type="radio"],
input[type="checkbox"],
textarea,
select {
  font-size:1em;
  padding: 10px;
  margin-left: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="radio"],
input[type="checkbox"] {
  display:inline-block; }
input[type="text"],
input[type="email"],
textarea {
  background-color:  ;
  color: #000000;
  width: 70%; }
form a {
  color:;
  text-shadow:none;}
form a:hover {
  color:#4c4a3f;
  text-shadow:none;}
textarea {
  height:7em; }
input[type="radio"],
input[type="checkbox"] {
  /* transform: scale(1.5);*/
  width:25px;
  height:25px; }
input[type="submit"],
a.btn {
  font-size:1.1em;
  padding: 10px;
  margin:10px;
  color:#FFFFFF;
  cursor: pointer;
  border: none;
  border-radius: 40px;
  background-color: #143974; }
input[type="submit"]:hover,
a.btn:hover {
  background-color: #ffbc3a;
  color:#000000; }

input::placeholder {
  color: #a5a49f;
  font-size:0.75em; }

/* Formular Rezept ====================================================================== */
/*
   rosa          #F48CA5
   dunkelrosa    #e15576
*/
form.rezeptform  {
        background-color:#F48CA5;
        background-image: -ms-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #F48CA5  160%);
        background-image: -moz-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #F48CA5  160%);
        background-image: -o-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #F48CA5  160%);
        background-image: -webkit-gradient(radial, right bottom, 0, right bottom, 1000, color-stop(0.3, #ffffff), color-stop(1.6, #F48CA5 ));
        background-image: -webkit-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #F48CA5  160%);
        background-image: radial-gradient(ellipse farthest-corner at right bottom, #ffffff 30%, #F48CA5  160%);
        border: solid 1px #F48CA5; }
form.rezeptform input[type="file"],
form.rezeptform input[type="text"],
form.rezeptform input[type="radio"],
form.rezeptform input[type="checkbox"],
form.rezeptform select,
form.rezeptform textarea {
        border: 1px solid #F48CA5; }

/* Formular Überweisung ====================================================================== */
/* gelb          #fee662
   rot           #fd5c3d
   dunklerrot    #e81702
*/
form.uewform  {
        background-color:#fee662;
        background-image: -ms-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #fee662  160%);
        background-image: -moz-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #fee662  160%);
        background-image: -o-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #fee662  160%);
        background-image: -webkit-gradient(radial, right bottom, 0, right bottom, 1000, color-stop(0.3, #ffffff), color-stop(1.6, #fee662 ));
        background-image: -webkit-radial-gradient(right bottom, ellipse farthest-corner, #ffffff 30%, #fee662  160%);
        background-image: radial-gradient(ellipse farthest-corner at right bottom, #ffffff 30%, #fee662  160%);
        border:solid 1px #fee662; }
form.uewform input[type="file"],
form.uewform input[type="text"],
form.uewform input[type="radio"],
form.uewform input[type="checkbox"],
form.uewform select,
form.uewform textarea {
        border: 1px solid #fd5c3d; }


/*===== MENU =====*/
#quicknavi a {
     color:#FFFFFF;  }
#quicknavi a:hover {
     color:#6aa1f7;  }
                nav {
                        margin: 0 auto;
                        width: 100%;
                        height: 5em;
                        text-align: right;
                        position: relative;
                        background: #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: 1.5em 0 0 0;
                        height: 100vh;
                        font-size:1.2em; }
                nav ul li {
                        list-style: none;
                        margin: 0;
                        display: inline;
                        padding:0; }
                nav ul li a {
                        color: #4c4a3f;
                        position: relative;
                        padding: 0.3em 0.7em 0.2em;
                        display: inline-block;
                        background: #eceae4;
                        border-radius:30px;
                        border-bottom:solid 3px transparent; }
                nav ul.menu li a:hover {
                        color: #143974;
                        border-bottom:solid 3px #ffbc3a; }


/*===== 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 20px 0 0; }
                }


                @media screen and (max-width: 960px) {
                        .pl              { padding-left:0; }
                        .pr              { padding-right:0; }
                        .halb            { width: 100%; }
                        .grid            { display:block; }
                        .rechts       { float:none !important; }
                        h1               { font-size: 1.6em; }
                        h2               { font-size: 1.4em; }
                        h3               { font-size: 1.2em; }
                        form label       { display:block; }
                        form label,
                        input[type="text"],
                        input[type="email"],
                        textarea         { width:calc(100% - 20px); }
                        input[type="submit"],
                        a.btn            { font-size:1em; }
                        section          { grid-template-columns: 1fr; }
                        .breitesite      { width: 100%; }
                        #quicknavi       { font-size:0.8em; padding:0 5px; }
                        form label,
                        input[type="text"],
                        input[type="email"],
                        textarea         { width:calc(100% - 20px); }
                        input[type="submit"],
                        a.btn            { font-size:1em; }
                        header           { height:80px; }
                        footer { padding: 20px; }

                        /*Formatierung Mobiles Menue*/
                        nav ul {
                                top: 4.5em;
                                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: 0.1em 0.5em; }
                        nav ul li a {
                                color: #4c4a3f; }

                        /*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; }
                }
                @media screen and (max-height: 300px) {
                        /*Formatierung Mobiles Menue*/
                        nav ul {
                                font-size:0.9em; }
                        nav ul li{
                                padding: 0em 0.5em; }
                        nav ul li a {
                        padding: 0em 0.7em;
                        background: none; }

                }