@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Regular.eot');
    src: url('../fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato/Lato-Regular.woff2') format('woff2'),
        url('../fonts/lato/Lato-Regular.woff') format('woff'),
        url('../fonts/lato/Lato-Regular.ttf') format('truetype'),
        url('../fonts/lato/Lato-Regular.svg#Lato-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Bold.eot');
    src: url('../fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato/Lato-Bold.woff2') format('woff2'),
        url('../fonts/lato/Lato-Bold.woff') format('woff'),
        url('../fonts/lato/Lato-Bold.ttf') format('truetype'),
        url('../fonts/lato/Lato-Bold.svg#Lato-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Medium.eot');
    src: url('../fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato/Lato-Medium.woff2') format('woff2'),
        url('../fonts/lato/Lato-Medium.woff') format('woff'),
        url('../fonts/lato/Lato-Medium.ttf') format('truetype'),
        url('../fonts/lato/Lato-Medium.svg#Lato-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Light.eot');
    src: url('../fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato/Lato-Light.woff2') format('woff2'),
        url('../fonts/lato/Lato-Light.woff') format('woff'),
        url('../fonts/lato/Lato-Light.ttf') format('truetype'),
        url('../fonts/lato/Lato-Light.svg#Lato-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

html {
    background: #DBF9DB;
    background-color: #DBF9DB;
    color: #020200;
    font-family: "Lato";
    line-height: 1.3rem;
    font-size: 1.25rem;
    font-weight: normal;
    font-style: normal;
    scroll-behavior: smooth;
    word-break: normal;
}

body {
    margin: 0;
    padding: 0;
}

h1 {
    line-height: 1.45rem;
    font-size: 1.45rem;
    font-weight:bold;
}
h2 {
    font-weight:bold;
    line-height: 1.35rem;
    font-size: 1.3rem;
    margin: 2.5rem 0 .5rem;
}

a {
    text-decoration:none;
}



/*desktop menues/elemente ausblenden ausblenden*/
#block-industriekletterer-views-block-menuepunkte-block-1,
#block-industriekletterer-views-block-burger-menuepunkte-block-1,
.region-help,
.region-hero,
#nachoben {

    display:none;
}
#nachoben {
        grid-area:content;
}
.sprungmarke {
    top: -80px;
    position: relative;
     height: 0px;
     width: 0px;
     visibility: hidden;
}

.layout-container {
    display:grid;
    grid-template-areas:
    "header"
    "content"
    "footer";
    position:relative;
}

header,
footer {
    background:#020200;
}

header a,
footer a {
    color: #dbf9db;
}
header a:hover,
footer a:hover {
    color: #89dc89;
}
header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index:10;
}

.region-header {
    display:grid;
    grid-template-areas:
        "branding hamburger";
    grid-template-columns: auto 60px;
    grid-template-rows: 75px;
}

/*mobile version logo grafik ausblenden*/
#block-industriekletterer-site-branding img {
    display:none;
}

/*mobile Version: Großer Name*/
#block-industriekletterer-site-branding {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    padding-left: .6rem;
    align-items: center;
}
footer {
    grid-area:footer;
}
#block-industriekletterer-fusszeile ul {
    margin:0;
    padding:0.5rem 0 0 0;
}
#block-industriekletterer-fusszeile ul li {
    text-align:center;
    margin: 1rem 0;

}

main {
  padding: 0 .6rem 3rem;
}




.paragraph .bildergalerie img {
  width: auto;
  display: block;
  height: auto;
  min-width: 100%;
  margin: 0 0 1rem;
}


/*menu*/
#block-industriekletterer-views-block-mobiles-menu-block-1 {
    grid-area: hamburger;
    display: grid;
    align-items: center;
    justify-content: center;
}

#block-industriekletterer-views-block-mobiles-menu-block-1 li {
    list-style:none;
}

#block-industriekletterer-views-block-mobiles-menu-block-1 li a {
  width: 100%;
  display: inline-block;
  margin: .15rem 0;
  padding: .25rem 0;
}

/*menu hamburger icon*/
#block-industriekletterer-views-block-mobiles-menu-block-1 input {
    display:none;
}

#block-industriekletterer-views-block-mobiles-menu-block-1 label svg {
    fill: #DBF9DB;
    position: relative;
        top:.25rem;
}

#block-industriekletterer-views-block-mobiles-menu-block-1 label svg:hover,
#block-industriekletterer-views-block-burger-menuepunkte-block-1 label svg:hover {
    cursor:pointer;
}


#block-industriekletterer-views-block-mobiles-menu-block-1 input:checked + label svg {
    fill:#89dc89;
}
#block-industriekletterer-views-block-mobiles-menu-block-1 label:hover > svg {
    fill: #b5eeb5;
}

/*hamburger menu punkte*/
#block-industriekletterer-views-block-mobiles-menu-block-1 ul {
    display:none;
    padding:0 .6rem;
    background: #020200;
    position: absolute;
    right: 0;
    left:0;
    margin: 2rem 0 0 0;
    z-index:-1;
}

#block-industriekletterer-views-block-mobiles-menu-block-1 input:checked ~ ul {
  display: inline-block;
    z-index:11;
}

.paragraph .zwischenueberschrift {
    padding: .5rem 0;
}

/*kontaktformular*/
.paragraph--type--kontaktformular {
    background: #b5eeb5;
    padding: 0 1rem;
    max-width: 550px;
    margin: auto;
}

.paragraph .kontaktformular label {
  min-width: 4rem;
  display: inline-block;
}
.paragraph .kontaktformular form {
}

.paragraph .kontaktformular .form-type-email input,
.paragraph .kontaktformular .form-type-tel input,
.paragraph .kontaktformular .form-type-textfield input {
  min-width: 10rem;
  position: relative;
  padding: 2px 5px;
}
.form-type-textarea textarea {
  position: relative;
  display: inline-block;
  max-width: 14rem;
}
.paragraph .kontaktformular label {
  min-width: 4rem;
  display: inline-block;
}


/*
 * .paragraph--type--fliesstext
.paragraph--type--galerie
*/


/*größere mobile*/
@media only screen and (min-width: 600px) {

    div.paragraph.bildergalerie div {
        display:grid;
        grid-template-columns: auto auto;
    }
    div.paragraph.bildergalerie div div {
            display: flex;
            justify-content: center;
            align-items: center;
    }

    div.paragraph.bildergalerie div div img {
        min-width:275px;
        width:100%;
    }

}

/*Tablets Hero aktivieren*/
@media only screen and (min-width: 767px) {

    .layout-container {
    display:grid;
    grid-template-areas:
    "header"
    "hero"
    "content"
    "footer";
    }
    .region-hero {
        display: inline-block;
        grid-area: hero;
        width: 100%;
        max-width: 100%;
        position: relative;
    }
   .region-hero #slogan1 {
        position: absolute;
        top: 30vh;
        color: #DBF9DB;
        font-weight: bold;
        font-size: 3rem;
        left: 5%;
        background: rgba(2, 2, 0, .7);
        line-height: 3rem;
        padding: 1rem 2rem;
    }

    .region-hero #slogan2 {
        position: absolute;
        top: 50vh;
        color: #DBF9DB;
        font-weight: bold;
        font-size: 1.5rem;
        left: 15%;
        background: rgba(2, 2, 0, .7);
        line-height: 1.5rem;
        padding: .5rem 1rem;
    }
    .region-hero video {
        width:100%;
        height:auto;
    }
}
/*größere mobile */
@media only screen and (min-width: 850px) {

    main {
        max-width:900px;
        margin:auto;
    }

    div.paragraph.bildergalerie div {
        display:grid;
        grid-template-columns: auto auto auto;
    }
    div.paragraph.bildergalerie div div {
            display: flex;
            justify-content: center;
            align-items: center;
    }

    div.paragraph.bildergalerie div div img {
        min-width:275px;
        width:100%;
    }

    .paragraph .kontaktformular form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}

/*desktop oder grosse tablets Desktop-Menues aktivieren*/
@media only screen and (min-width: 1023px) {

    .region-header {
        grid-template-areas:
        "branding menu burger";
        grid-template-rows: 75px;
        grid-template-columns: 34% 60% auto;
        max-height: 75px;
        padding: .3rem 0;
    }

    /*mobiles menu ausblenden*/
    #block-industriekletterer-views-block-mobiles-menu-block-1 {
        display:none;
    }

    /*desktop menues/elemente einblenden*/
    #block-industriekletterer-views-block-menuepunkte-block-1,
    #block-industriekletterer-views-block-burger-menuepunkte-block-1,
    #nachoben {
        display:inline-block;
    }

    #nachoben {
        position:fixed;
        right:100px;
        bottom:200px;
        z-index:-1;
        visibility:hidden;
    }

    /*hauptmenu*/
    #block-industriekletterer-views-block-menuepunkte-block-1 {
        grid-area:menu;
    }

    #block-industriekletterer-views-block-menuepunkte-block-1 div {
        display: grid;
        align-items: end;
        height: 100%;
        font-size: 1.4rem;
        font-weight: bold;
        position:relative;
    }

    #block-industriekletterer-views-block-menuepunkte-block-1 .menu {
        display: flex;
        justify-content: space-evenly;
    }

    /*Desktop Burger*/
    #block-industriekletterer-views-block-burger-menuepunkte-block-1 {
        grid-area: burger;
        display: grid;
        align-items: center;
        justify-content: center;
        position:relative;
    }

    #block-industriekletterer-views-block-burger-menuepunkte-block-1 li {
        list-style:none;
    }

    #block-industriekletterer-views-block-burger-menuepunkte-block-1 li a {
    width: 100%;
    display: inline-block;
    margin: .15rem 0;
    padding: .25rem 0;
    }

    /*menu hamburger icon*/
    #block-industriekletterer-views-block-burger-menuepunkte-block-1 input {
        display:none;
    }

    #block-industriekletterer-views-block-burger-menuepunkte-block-1 label svg {
        fill: #DBF9DB;
        position: relative;
        top:.25rem;
    }

    #block-industriekletterer-views-block-burger-menuepunkte-block-1 input:checked + label svg {
        fill:#89dc89;
    }
    #block-industriekletterer-views-block-burger-menuepunkte-block-1 label:hover > svg {
        fill: #b5eeb5;
    }

    /*hamburger menu punkte*/
    #block-industriekletterer-views-block-burger-menuepunkte-block-1 ul {
        display: none;
        padding: 0 .6rem;
        background: #020200;
        position: absolute;
        right: 0;
        margin: 3rem 0 0 0;
        z-index: -1;
    }

    #block-industriekletterer-views-block-burger-menuepunkte-block-1 input:checked ~ ul {
    display: inline-block;
        z-index:11;
    }

}

@media only screen and (min-width: 1250px) {

   .region-hero #slogan1 {
        top: 30vh;
        font-size: 4rem;
        left: 5%;
        line-height: 4rem;
    }

    .region-hero #slogan2 {
        top: 50vh;
        font-size: 3rem;
        left: 15%;
        line-height: 3rem;
        padding: .5rem 1rem;
    }

}
@media only screen and (min-width: 1500px) {

   .region-hero #slogan1 {
        top: 30vh;
        font-size: 5rem;
        left: 5%;
        line-height: 5rem;
    }

    .region-hero #slogan2 {
        top: 50vh;
        font-size: 4rem;
        left: 15%;
        line-height: 4rem;
        padding: .5rem 1rem;
    }

}

@media only screen and (min-width: 1700px) {

   .region-hero #slogan1 {
        top: 30vh;
        left: 5%;
    }

    .region-hero #slogan2 {
        top: 50vh;
        left: 15%;
    }

}


@media only screen and (min-width: 1959px) {
    .region-hero,
    .region-header {
        max-width:1960px;
        margin:auto;
    }

}