@font-face {
  font-family: 'Roboto';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Roboto/Roboto-Regular.ttf')  format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-weight: bold;
  font-style: normal;
  src: url('fonts/Roboto/Roboto-Bold.ttf')  format('truetype');
}

/****** main ******/

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: #222;
}

h1 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 32pt;
}

h2 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 26pt;
}

h3 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 18pt;
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
        "header header header"
        "info info info"
        "blog services social"
        "map map map"
        "impressum contact address2";
}

@media (max-width: 1023px) {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto repeat(7, auto);
        grid-template-areas:
            "header"
            "info"
            "blog"
            "services"
            "social"
            "map"
            "impressum"
            "contact"
            "address2";
    }
}

@media (max-width: 695px) {
    .wrapper {
        grid-template-rows: repeat(8, auto);
    }
}


/****** anchor links ******/

a.anchorlink {
    visibility: hidden;
    font-size: 80%;
    color: inherit;
    text-decoration: none;
}

h1:hover a.anchorlink,
h2:hover a.anchorlink,
h3:hover a.anchorlink {
    visibility: visible;
}


/****** header ******/

.header {
    grid-area: header;
    text-align: center;
    width: 100%;
}

.header img.foto {
    width: 100%;
    height: auto;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), 80%, rgba(0, 0, 0, 0));
}

.header img.logo {
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    z-index: 2;
    padding-top: 2vh;
    padding-bottom: 2vh;
    filter: invert(41%) sepia(30%) saturate(3522%) hue-rotate(91deg) brightness(101%) contrast(105%) drop-shadow(0 0 2rem black);
    /* this filter tints the svg #00b300 and adds a shadow */
}

@media (max-width: 1140px) {
    .header img.logo {
        width: 60%;
        height: auto;
    }
}


/********* info **********/

.info {
    grid-area: info;
    position: relative;
    top: -15vh;
    margin-bottom: -15vh;
    padding-top: 1em;
    padding-bottom: 3em;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing: border-box;
    text-align: center;
    color: #eee;
}

.info p {
    font-size: 14pt;
    line-height: 150%;
}

.info a {
    color: inherit;
    ly: OpenSans Bold;
}

.info img {
    width: 100%;
}

.info h2 {
    padding: 1.5em 0 0;
}

.info h3 {
    padding: 1em 0 0;
}


/****** aktivitaeten *******/

.aktivitaet:first-of-type h3 {
    padding-top: 20px;
}

.aktivitaet h3 {
    margin-bottom: 0.2ex;
}

.aktivitaet p {
    margin: 0;
}


/****** events *******/

.event:first-of-type h3 {
    padding-top: 20px;
}

.event h3 {
    margin-bottom: 0;
}

.event h3 a {
    text-decoration: underline solid 1px;
}

.event p {
    margin: 0;
}


/****** blog *******/

.blogentry:first-of-type h3 {
    padding-top: 20px;
}

.blogentry h3 {
    margin-bottom: 0;
}

.blogentry h3 a {
    text-decoration: underline solid 1px;
}

.blogentry p {
    margin: 0;
}


/****** link sections *******/

.links {
    padding-top: 1em;
    padding-bottom: 3em;
    background: white;
}

.blog {
    grid-area: blog;
    text-align: center;
}

.blog img {
    height: 5em;
    width: auto;
    filter: grayscale(100%);
    padding-right: 1em;
    padding-left: 1em;
}

.blog img:hover {
    filter: none;
}

.services {
    grid-area: services;
    text-align: center;
}

.services img {
    width: auto;
    height: 5em;
    filter: grayscale(100%);
    padding-right: 1em;
    padding-left: 1em;
}

.services img:hover {
    filter: none;
}

.social {
    grid-area: social;
    text-align: center;
}

.social img {
    width: auto;
    height: 5em;
    filter: grayscale(100%);
    padding-right: 1em;
    padding-left: 1em;
}

.social img:hover {
    filter: none;
}


/******* map section **********/

.map {
    color: #eee;
    grid-area: map;
    text-align: center;
}

.map iframe {
    border-top: 1px solid black;
    pointer-events: none;
}


/******** footer **********/

.footer {
    color: #eee;
    text-align: left;
    padding-top: 1em;
    padding-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
}

.footer p {
    font-size: 10pt;
}

.footer h2 {
    font-size: 15pt;
}

.footer ul {
    font-size: 10pt;
}

.footer a {
    color: inherit;
}

.address {
    grid-area: impressum;
}

.address address {
    font-size: 10pt;
    font-style: normal;
}

.contact {
    grid-area: contact;
}

.address2 {
    grid-area: address2;
}