@charset "utf-8";
 /* Simplify width and height calculations */
html {box-sizing: border-box;
}
*, *:before,
*:after {
    box-sizing: inherit;
}

@font-face {
    font-family: 'momstypewriterregular';
    src: url('../webfont/typewriter/moms_typewriter-webfont.woff2') format('woff2'),
         url('../webfont/typewriter/moms_typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../webfont/opensans/opensans-regular-webfont.woff2') format('woff2'),
         url('../webfont/opensans/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('../webfont/opensans/opensans-bold-webfont.woff2') format('woff2'),
         url('../webfont/opensans/opensans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    color: #000;
    font-family: open_sansregular, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.25em;
    background-color: rgba(1, 1, 1, 0.04);
    --screen: "small";
    /*background-image:
            linear-gradient(to bottom, rgba(197,155,78,0.3), rgba(197,155,78,0.3)),
            url("../images/gato-background.png");*/	
}

#wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 1100px;
    background-color: white;
}

#myBtn {
    background-image: url("../images/gatoscrollup.ico");
    display: inline;
    position: static;
    margin: 0px 0px 0px 20px;
    z-index: 99;
    border: none;
    /*  outline: none;*/
    background-color: rgba(111, 86, 24, 0);  
    cursor: pointer;
    width: 22px;
    height: 22px;
    /*padding-left: 500px;
    border-radius: 1px;*/
}

#myBtn:hover {
    /*background-color: rgba(111, 86, 24, 0.48);*/
    text-decoration: underline;
}

.btnText {
    background-image: url("../images/gatoscrollup-text.ico");
    display: none;
    border: none;
    float: right;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

#datenschutz{
    font-size: 0.75em;
}

.smallText{
    font-size: 0.7em;
}

h1 , h2, h3{	
    color: rgba(12,79,0,1);
    font-style: normal;
    font-weight: 500;	
}
h1 {	
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 2.2em;
    text-align: center;	
    font-variant: small-caps; 
    font-family: momstypewriterregular, sans-serif;	
}
h2 {
    font-size: 1.5em;
    margin-top: 0.5em;
    font-family: open_sansbold, sans-serif;	
}
h3 {
    font-size: 1.0em;
    margin-top: 0.5em;
    font-family: open_sansbold, sans-serif;	
}

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(206, 199, 181,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(206, 199, 181,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(206, 199, 181,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(206, 199, 181,0.75), rgba(0,0,0,0)); 
}

a {
    font-size: 1.5em;
    font-weight: 500;
    text-decoration: none;	
    font-family: open_sansregular, sans-serif;
    font-variant: small-caps;
    color: rgba(111, 86, 24, 0.78);	
}
a:hover, a:active, a:focus {	
    text-decoration: underline;
}
a.link-footer{
    color: rgba(0, 0, 0, 1);
    font-size: 1.2em;
    margin-left: 1.4em;
}
a.link-ds{
    font-variant: normal;
}

#menulink {
    text-align: center;
    background-color: #000000;
    margin: 0;
}
#menulink a {
    color: white;
    font-size: 0.7em;
    font-weight: 200;
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    font-family: open_sansregular, sans-serif;
    font-style: normal;
}

#navlinks {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
    list-style-type: none;	
    background-color: rgba(0,0,0,1);
    position: absolute;
    -webkit-transition: all ease-out 0.5s;
    transition: all ease-out 0.5s;
}
#navlinks.displayed {
    /*top: 135px;*/
    z-index: 1;
    opacity: 1;
}
#navlinks.start {
    display: none;
}
#navlinks.collapsed {
    top: -12em;
    opacity: 0;
}
#navlinks a {
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
    color: white;
    font-weight: 400;
    text-decoration: none;	
}
#navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage {
    color: rgba(111, 86, 24, 0.78);
}

main, aside {
    margin-left: 4%;
    margin-right: 4%;
    text-align: justify;
    text-justify: inter-word;
    letter-spacing: 0.1em;
}
aside{
    font-size: 1.1em;
}

form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;    
}

form label {
    flex: 1 1 30%; /* shorthand for flex-grow flex-shrink flex-basis */
    margin-right: 30px;
}

form input, textarea, select, button {
    flex: 1 1 300px;    
    margin-bottom: 10px;
    height: 30px;
    font-size: 1.0em;
/*    width: 300px;*/
}

form textarea{
    flex: 1 0 500px;
    height: 100px;
    width: 200px;
}

form button { /* Style für den Button */
        margin-left: auto; /* Positioniert den Button rechtsbündig */
        margin-top: 30px; /* Verschiebt den Button eine Zeile nach unten */
/*        height: 30px;
        width: 180px;*/
}
        
figure  {
    width: 400px;
    max-width: 92%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
figure img {
    max-width: 100%;
    transition-property: transform;
    transition-duration: 0.8s;
}
figure img:hover{
    transform:scale(1.1);
}
figcaption {
    display: block;
    margin-top: 0.5em;
    font-size: 0.75em;
    text-transform: uppercase;
}
figcaption.copyright{
    font-size: 0.5em;
}

div#gatoPop{
    display: none;
    position: absolute;
    z-index: 99;    
    width: 95%;
    top: 300px;
    padding: 20px;    
    border: solid rgba(111, 86, 24, 0.7);
    background-color: white;
    box-shadow: 15px 15px 30px rgba(111, 86, 24, 0.5);
    opacity: 100%;
}
div#gatoPop img{
    display: none;
}

.logo{
    margin-left: 0%;
    margin-right: 0%;
}
.logo1 figure {
    width: 25px;
    height: 25px;
    left: 0px;
    float: left;
    top: 0px;
    max-width: 25px;
    max-height: 25px;
    padding-top: 0px;
    margin-right: 3px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.logo2 figure {
    width: 100px;
    height: 125px;
    left: 0px;
    float: left;
    top: 0px;
    max-width: 100px;
    max-height: 125px;
    padding-top: 0px;
    margin-right: 10px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.grayscale:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.gatoscale {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.gatoscale:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

footer {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: rgba(111, 86, 24, 0.58);
    color: black;
    font-size: 0.8em;
    text-align: center;
}

@media (min-width: 700px){
    body{
        --screen: "large";
    }
    #menulink {
        display: none;
    }
    #navlinks {
        max-width: 1000px;
        position: static;
        background-color: transparent;
    }
    #navlinks.collapsed {
            opacity: 1;
    }
    #navlinks a {
        width: 25%;
        margin-bottom: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
        float: left;
        color: #000000;
    }
    header {
        overflow: hidden;
    }
 
    main {
        width: 60%;
    }
    aside {
        width: 28%;
        margin-left: 0;
    }
    main, aside {
        margin-top: 30px;
        margin-bottom: 30px;
        float: left;
        font-size: 0.9em;
    }
    aside{
        font-size: 0.7em;
    }
    .figure {
        display: flex;
        flex-wrap: wrap;
    }

    .figure img {
        margin: 5px;
    }

    div#gatoPop{
        display: none;
        left: 50%;
        top: 20%;
        transform: translate(-50%);
        width: 40%;
    }
    div#gatoPop img{
        display: block;
        margin: 5px 0px 10px 10px;
    }

    footer {
        clear: left;
    }
}

@media (min-width: 900px){
    .floatright {
        float: right;
        margin-right: 0px;
        margin-left: 10px;
    }
    .floatleft {
        float: left;
        margin-right: 10px;
    }
}