/* lato-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/lato-v25-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/lato-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/lato-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/lato-v25-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lato-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/lato-v25-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}







/* ==========================================
   TABLET
========================================== */
@media (max-width: 1024px){

    .wrap{
        width:92%;
    }

    #top .wrap,
    #homehead .wrap,
    #secondcon .wrap,
    #footer .wrap,
    #contact .grid{
        flex-direction:column;
    }

    #top img.logo{
        max-width:320px;
    }

    #top ul#navigation{
        padding-top:25px;
        flex-wrap:wrap;
        justify-content:center;
        font-size:18px;
    }

    #homehead .l,
    #homehead .r,
    #secondcon .l,
    #secondcon .r{
        width:100%;
    }

    #homehead .r,
    #secondcon .r{
        padding-top:30px;
    }

    #leistungen .lboxes{
        grid-template-columns:repeat(2,1fr);
    }

    #consep .group .item{
        flex:1 1 calc(50% - 15px);
    }

    .pageheadcon{
        left:30px;
    }

    #conhead p.hl1{
        font-size:32px;
        line-height:34px;
    }

    #footer p{text-align:center;}
}

@media (max-width:900px){

    #top .wrap{
        display:block !important;
        position:relative;
    }

    .nav-toggle{
        display:flex;
        align-items:center;
        justify-content:center;

        position:fixed;
        right:20px;
        top:45px;

        width:50px;
        height:50px;

        background:#294753;
        border:0;
        color:#fff;
        font-size:30px;
        z-index:10001;
    }

    /* Fullscreen Menü */

    #top ul#navigation{
        position:fixed;

        top:0;
        right:0;

        width:100vw;
        height:100vh;

        background:#294753;

        display:flex !important;
        flex-direction:column;
        justify-content:center;
        align-items:center;

        transform:translateX(100%);
        transition:.45s cubic-bezier(.77,0,.18,1);

        z-index:10000;
        padding:0;
        margin:0;
    }

    #top ul#navigation.active{
        transform:translateX(0);
    }

    #top ul#navigation li{
        margin:0;
        width:auto;
    }

    #top ul#navigation li a{
        color:#fff !important;
        background:none !important;

        font-size:32px;
        line-height:1.2;

        padding:15px 0;

        text-transform:uppercase;
        font-weight:700;
    }

    #top ul#navigation li a:hover{
        opacity:.7;
    }

    /* Untermenüs */

    #top ul#navigation li ul{
        display:block !important;
        position:static !important;

        background:none;
        padding:0;
        margin:10px 0 20px 0;

        opacity:1;
        visibility:visible;
        transform:none;
    }

    #top ul#navigation li ul li a{
        font-size:18px !important;
        font-weight:400;
        opacity:.8;
        text-align:center;
    }

    body.menu-open{
        overflow:hidden;
    }

    /* Hamburger Animation */

    .nav-toggle{
        font-size:0;
    }

    .nav-toggle:before,
    .nav-toggle:after,
    .nav-toggle span{
        content:"";
        position:absolute;
        width:24px;
        height:3px;
        background:#fff;
        transition:.3s;
    }

    .nav-toggle:before{
        transform:translateY(-8px);
    }

    .nav-toggle:after{
        transform:translateY(8px);
    }

    .nav-toggle.active span{
        opacity:0;
    }

    .nav-toggle.active:before{
        transform:rotate(45deg);
    }

    .nav-toggle.active:after{
        transform:rotate(-45deg);
    }
}


/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px){

    body{
        font-size:16px;
        line-height:24px;
    }

    .wrap{
        width:94%;
    }

    h1,h2,h3,h4,h5,h6{
        word-wrap:break-word;
    }

    /* Header */

    #top{
        padding-top:15px;
        padding-bottom:15px;
    }

    #top .wrap{
        text-align:center;
    }

    #top img.logo{
        max-width:280px;
    }

    #top ul#navigation{
        padding-top:20px;
        font-size:16px;
        justify-content:center;
    }

    #top ul#navigation li{
        margin:3px;
    }

    #top ul#navigation li a{
        padding:10px 12px;
    }

    #top ul#navigation li:hover ul{
        position:relative;
        display:block;
        margin-left:0;
        width:100%;
    }

    /* Hero */

    #homehead,
    #secondcon{
        font-size:18px;
        line-height:28px;
    }

    #homehead h1,
    #secondcon h2{
        font-size:30px;
        line-height:34px;
    }

    #homehead h2,
    #secondcon h3{
        font-size:38px;
        line-height:40px;
    }

    /* Leistungen */

    #leistungen .lboxes{
        grid-template-columns:1fr;
    }

    /* Kontakt */

    #contact .wrap{
        padding:20px;
    }

    #contact .grid p{
        width:100%;
    }

    /* Content */

    .alignleft,
    .alignright{
        float:none;
        display:block;
        margin:0 auto 20px auto;
        max-width:100%;
    }

    #content img{
        max-width:100%;
        height:auto;
    }

    /* Headerbild */
    .pageheadcon{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        padding:20px;
        background:#294753;
    }

    .pageheadconoverlay{
        display:none;
    }

    #conhead p.hl1{
        font-size:28px;
        line-height:30px;
    }

    /* Konzept */

    #consep .group{
        gap:20px;
    }

    #consep .group .item{
        flex:1 1 100%;
        padding:25px 20px;
    }

    #consep .group .item h4{
        font-size:20px;
        line-height:24px;
    }

    /* Footer */

    #footer{
        text-align:center;
    }

    #footer .wrap{
        gap:20px;
    }

    #footer ul li{
        display:block;
        margin-bottom:8px;
    }

    #footer ul li::after{
        display:none;
    }
    #footer ul li {
  margin-left:5px;margin-right:5px;display:block;
}
#footer ul li:not(:nth-last-child(-n+2)){display:none;}
#footer ul#footnav{display:block;}
}


/* ==========================================
   KLEINE SMARTPHONES
========================================== */
@media (max-width: 480px){

    #homehead h1,
    #secondcon h2{
        font-size:24px;
        line-height:28px;
    }

    #homehead h2,
    #secondcon h3{
        font-size:30px;
        line-height:32px;
    }
 
    #leistungen h3,
    #contact h3,
    #content h1,
    #content h2,
    #consep h2,
    #consep h3{
        font-size:24px;
        line-height:28px;
    }

    a.btn,
    button{
        width:100%;
        text-align:center;
        margin-bottom:10px;
    }

    #top ul#navigation{
        flex-direction:column;
        width:100%;
    }

    #top ul#navigation li{
        width:100%;
    }

    #top ul#navigation li a{
        text-align:center;
    }

}