/* cmsms stylesheet: 36_Grad_Mobil modified: Samstag, 5. Februar 2022 16:05:43 */


/* =====================================
/* Default styles for screens up to 1024px width 
===================================== */
/* hide print button */
a.printbutton {
    display: none
}
#main.content .inner-content img { 
        width: 100%;
        height: auto;
}
nav.main-navigation > ul > li {
    font-size:0.8375em;
}

/* =====================================
Small Tablet (Querformat - Landscape) 
===================================== */
@media only screen and (min-width: 768px) and (max-width: 800px) and (orientation : landscape) {
    body {
        font-size: 90%;
    }
    .logo {
    background-position: -24px 32px;
    background-size: 330px;
    }
}
/* =====================================
Tablet (Querformat - Landscape) 
===================================== */
@media only screen and (min-width: 801px) and (max-width: 1024px) and (orientation : landscape) {
    .logo {
        background-position: -24px 32px;
        background-size: 330px;
    }

    nav.main-navigation > ul > li > a, nav.main-navigation > ul > li.sectionheader span {
        font-size: 0.75em;
    }
    nav.main-navigation > ul > li.li-kontakt a {
        font-size: 1.125em;
    }
    nav.main-navigation > ul > li.last, nav.main-navigation > ul > li.li-kontakt {
        padding-right:74px;
    }
    nav.main-navigation > ul > li {
        margin: 0px 19px 0 0;
    }
    nav.main-navigation > ul > li:nth-child(5)  {
        margin-right:0;
    }
    .slogan2 blockquote,
    .slogan2 blockquote p {
        font-size: 0.9375em
    }

    .footer, .footer p {
        font-size: 0.9375em;
        line-height: 1.5;
        font-weight: 100;
    }
}


/* =====================================
Tablet (Formatunabhaengig)
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .logo {
    background-size: 270px auto;
    background-position: -24px 72px
    }
    nav.main-navigation.sticky > ul {
        padding:0;
    }
    nav.main-navigation.sticky > ul > li {
        margin:0 16px;
        font-size: 0.825em;
    }
}
/* =====================================
Tablet (Hochformat - Portrait) 
===================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
    body {
        font-size:90%
    }
    .logo {
        background-size: 270px auto;
        background-position: -24px 72px
    }
    .slogan p {
        line-height: 4;
    }
    .slogan2 blockquote,
    .slogan2 blockquote p {
    font-size: 0.875em
    }
    nav.main-navigation {
    width: 100% !important;
    left: 0 !important;
    }
    #main.content .inner-content {
        padding-left:6.6%;
    }

    .footer, .footer p {
        font-size: 0.875em;
        line-height: 1.8;
        font-weight: 100;
    }
    .header {
        height: 630px;
    }
}
/* =====================================
Small Tablet (Portait) 
===================================== */
@media only screen and (min-width: 600px) and (max-width: 767px) and (orientation : portrait) { 
    body {
        font-size: 0.875em;
    }
    #main.content .inner-content {
        padding:0;
    }
    #main.content .inner-content img { 
    width: 100%;
    height: auto;
    }
    .container h2 {padding-left:0;text-align:center;text-indent: 0;}
    .container .grid_4 {margin:0;display:block;width: 100%;}
    .container .grid_8 {width:98%;}
    .container .pull_8 {left:0;}
    .container .push_4 {left:0;} 
    .container .logo {
        height: 150px;
        background-position: -20px 24px;
        background-size:200px auto;
    }
    .container .logo.grid_4 {
        width: 28.6667%;
        float: left;
    }
    .container .grid_8 {
        width:100%;
    }
    .container .grid_8.slogan {
        width: 64.667%;
        float: left;
        margin:0;
    }
    .slogan {
        height: 150px;
    }
    .slogan p {
        font-size: 1.8em;
        margin: 60px 0px 0px 30px;
    }
    .container .grid_8 .slogan2 {
        background-color: #64A039;
        width:100%!important;
        font-size:0.8em;
        margin: 0;
    }
    .slogan2 blockquote p {
        text-align: center;
        margin: 0;
    }
    .aside img {
        display: none;
    }
    .footer {display: block;text-align: center;line-height:1.5;}
    .footer .logo {display:none} 
    .footer .grid_3 {display: block}
    .footer .impressum,
    .footer .hannover,
    .footer .seelze {
        padding-left:0
    }
    .aside > p {
        padding-left:0;
    }

}

/* =====================================
Smartphones (Landscape) 480
===================================== */
@media only screen and (max-width: 599px) {
    body {font-size: 85%;}
    header#top {
        height: auto;
    }
    .content-wrapper {padding-top:0;}
    #main.content .inner-content {padding-left: 0;padding-right: 0;}
    .logo {display:block;height: 110px;background-size: 140px;background-position: 0 0;}
    .slogan {
        float: left;
        height: 60px;
    }
    .slogan p {
            font-size: 1.8em;
            line-height: 2;
            font-weight: 100;
            text-align: center;

    }
    .container h2 {height: auto;text-align:center;padding-left:0;background:#4A4A49;display: block;text-indent: 0;line-height: 1.5}
    .aside img {display:none;}
    .aside > p {padding-left: 0;}
    .footer * {text-align: center;}
    .footer {display:block;line-height: 1.5;}
    .footer p {line-height: 1.5;}
    .footer .logo {display: none;}
    .footer .grid_3 {display:block;padding-bottom: 0;height: 130px;}
    .container .grid_4,
    .container .grid_8 {
        width: 100%;
    }
    .container .push_4 {
        left:0;
    }
    .container .pull_8 {
        left:0;
    }
    #main.content ul li {
        padding-left: 5%;
        margin-bottom: 12px;
        background-position: 0 3px;
    }
    .footer .impressum,
    .footer .hannover,
    .footer .seelze {
        padding-left:0
    }
}
/* =====================================
Smartphones (Landscape) 
===================================== */
@media only screen and (max-width: 480px) {
    body {
        font-size: 80%;
    }
    .alpha.grid_8.omega.slogan2 {
        height:97px;
    }
    #main {
        margin-top:54px;
    }
}
/* =====================================
Sonstige Anpassungen
===================================== */
@media only screen and (max-width: 600px) {
    nav#nav, nav#nav.sticky {
        display: none;
    }
    .header {
        height: 310px;
    }
    .slogan2 {
        background-color:#64a039;
    }
    .slogan2 blockquote p {
        font-size: 85%;
    }
    .alpha.grid_4.omega.placeholder {
        display: none;
    }
    .alpha.grid_8.omega.slogan2 {
        margin: 0;
    }
    .container h2 {
        background:#4A4A49;
        margin:10px 0;
        line-height: 60px;
    }
    .container .grid_8 {
        width:71.33333%;
        width:100%;
        margin:0!important;
    }
}
@media only screen and (min-width:601px) and (max-width: 767px) {
    nav#nav {
        width:100%;
        left:0;
    }
   .header {
    height: 370px;
   } 
   .content-wrapper {
    padding-top:0;
   }
}
@media only screen and (min-width: 1021px) and (max-width: 1160px) {
    .slogan2 blockquote, .slogan2 blockquote p {
        font-size: 0.9em;
    }
    nav.main-navigation > ul > li:nth-child(5)  {
        margin-right:0;
    }
    .logo {
        background-size: 270px auto;
        background-position: -24px 72px;
    }
}

.stacktable { width: 100%; }

.st-head-row { padding-top: 1em; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }

.st-key { width: 49%; text-align: right; padding-right: 1%; }
.st-val { width: 49%; padding-left: 1%; }



/* RESPONSIVE EXAMPLE */

.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 800px) {
  .stacktable.large-only { display: none; }
  .stacktable.small-only { display: table; }
}