/* Allgemein */
@import url("https://use.typekit.net/jul2mgn.css");

/* Breite Editor */
 .wp-block {
   margin: 0 auto;
   max-width: 1080px;
 }
 /* Blöcke mit class .wide */
 .wp-block[data-align="wide"] {
   margin: 0 auto;
   max-width: 1080px;
 }
 /* Blöcke mit class .full-width */
 .wp-block[data-align="full"] {
   margin: 0 auto;
   max-width: none;
 }

/* ==================== Fonts
=============================
========================== */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto100'), local('Roboto100'), url('assets/fonts/Roboto/Roboto100.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto400'), local('Roboto400'), url('assets/fonts/Roboto/Roboto400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto400'), local('Roboto400'), url('assets/fonts/Roboto/Roboto400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto700'), local('Roboto700'), url('assets/fonts/Roboto/Roboto700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto900'), local('Roboto900'), url('assets/fonts/Roboto/Roboto900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ================ Allgemein
=============================
========================== */
*,html,body,figure,#top-body {margin:0;padding:0;}
#top-body {font-family:Roboto,sans-serif;background:#f4f4f4;color:#3E3F40;width:100%;}

#top-body .wartung #content,
#footer-backtop p,
header,
#footer-intro,
#footer,
.startintro div,
.startbox,
.startinfo,
.stellenangebote,
.datenschutz,
.impressum,
.jobsbox,
.zustellerintro,
.formular,
.top-faq
 {width:1080px;margin:0 auto;}

/* Button */
.formular .ff-default .topbutton.ff_btn_style,
 .topbutton a {border: 2px solid #39be85;border-radius:0;padding:10px 50px;text-transform:uppercase;color:#39be85;font-weight:700;background:#fff;display:block;width:150px;text-align:center;text-decoration:none;}
 .formular .ff-default .topbutton.ff_btn_style:hover,
 .topbutton a:hover {text-decoration:none;box-shadow:0 10px 20px rgba(0,0,0,0.22);background:#39be85;color:#fff;}

.formular .ff-default .topbutton.ff_btn_style {width:auto;}

/* Cookiebot */
#CybotCookiebotDialog > div {display:none;}


/* ============= Schriftgröße
=============================
========================== */
#container h1 {font-size:65px;font-weight:900;line-height:1;padding:50px 0 20px 0;margin:0}
#container h2 {font-size:45px;text-transform:uppercase;}
#container h3 {font-size:35px;}
#container h4 {font-size:24px;padding:0 0 20px 0;}
#container h5 {font-size:16px;}

/* =================== Header
=============================
========================== */
header {position:absolute;display:block;z-index:9999;width:100%;}
.topmenu {float:right;}

.topnav {overflow:hidden;margin:30px auto 0 auto;width:1080px;}

.topnav a {
  float:left;
  display:block;
  color:#f2f2f2;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
  text-transform:uppercase;
}

.topnav .topmenu a:hover {
  background-color: #3E3F40;
  color: #fff;
}

.topnav a.active {
  background-color: #04AA6D;
  color: #fff;
}

.topnav .icon {
  display: none;
}

.toplogo img {width:180px;height:auto;}
.topnav .toplogo a {padding:0;}


/* =================== Footer
=============================
========================== */
footer {z-index:100;}
footer a {color:#fff;}
#footer-intro {background:linear-gradient(to right, #1E9976, #4ADB91);position:relative;top:40px;}
#footer-intro p {text-align:center;color:#fff;padding-bottom:30px;}
#footer-intro p strong {font-size:50px;text-transform:uppercase;display:block;padding-top:30px;}

#footer-backtop {background:#3E3F40;text-align:center;padding:80px 0 50px 0;}
#footer-backtop a.link-backtop {text-decoration:none;}
#footer-backtop p {height:50px;color:#fff;}
#footer-backtop img {width:50px;height:auto;}
#footer-backtop .footer-arrow {display:block;}

#footer-bottom {padding-top:25px;background:#2D2E2F;}
#footer {height:40px;color:#fff;font-size:12px;text-transform:uppercase;}
#footer a {text-decoration:none;}
.fleft {float:left;}
.fright {float:right;}


/* =============== Startseite
=============================
========================== */
.startintro {
  background: rgba(0, 0, 0, .3) url('assets/img/Hintergrund.jpg');
  background-blend-mode:darken;
  background-size:cover;
  background-position:center;
  height:800px;
  padding-top:200px;
  color:#fff;
  line-height:1.5;
}

.startintro div h1 {width:800px;}
.startintro div p {width:600px;}

.startbox {background:#fff;margin-top:-100px;}
.startbox figure {margin:0;}
.startbox .sbright {padding:40px 0 0;}
.startbox .sbright h2 {color:#3E3F40;font-weight:500;padding-right:50px;}
.startbox .sbright h2 strong {font-weight:900;}
.startbox .sbright p {font-weight:100;line-height:1.8;padding:20px 50px 0 0;}

.startinfo {margin-top:80px;margin-bottom:50px;text-transform:uppercase;}
.startinfo h2 {margin-bottom:20px;}
.startinfo p {font-weight:700;color:#8c8c8c;}

.startinfo .si-layout-3 {text-align:center;margin-top:30px;}
.startinfo img {width:140px;height:auto;}
#top-body .startinfo h4 {padding:15px 0;}
.startinfo .si-layout-3 p {font-weight:100;}

.sa-layout-2 {margin-top:50px;padding:50px;background:#EAEBEC;}
.sa-box {background:#39be85;color:#fff;padding:20px;box-shadow:0 5px 20px #b0b0b0;}
.sa-box ul {margin:10px 0 0 20px;}
.sa-layout-2 p.topbutton {margin-top:20px;}
.sa-content p {padding:20px 0;}
.sa-content ul {margin-left:20px;}

/* ================= Über uns
=============================
========================== */

.top-title {width:1080px;margin:0 auto;}
.top-title .headline {position:absolute;}
#top-body .headline h1 {color:#fff;text-transform:uppercase;margin-top:150px;font-size:75px;}

.page-headline {
  height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background-image:linear-gradient(to right, #1E9976, #4ADB91);
  color:#fff;}

.page-headline-text {width:1080px;margin:120px auto 0 auto;line-height:1.5;}

.leistungsstart {background:#EAEBEC;}
.leistungsstart img {width:100%;height:auto;}
.ls-text {width:1080px;margin:0 auto;padding:100px;}
.ls-text p,
.lb-text {line-height:1.5;}

.leistungen {padding:100px 0;}
.leistungen h2 {text-align:center;padding-bottom:100px;}

.leistungen .lb-text {
  background:#fff;
  box-shadow:0 0 16px 8px rgba(0,0,0,0.08);
  padding:50px;
  position:absolute;
  margin-left:45%;
  margin-top:80px;
  width:450px;
}
.leistungen .leistungsbox:nth-child(3) .lb-text {margin-left:35%;}

.leistungsbox:nth-child(3),
.leistungsbox:nth-child(2) {padding-bottom:100px;}
.lb-img {margin-left:50%!important;}
.lb-text p {color:#8c8c8c;}
.leistungen figure,
.leistungen img {width:100%;height:auto;}

.leistungsende {z-index:-1;margin-bottom:-400px;position:relative;}
.leistungsende p {text-transform:uppercase;padding-top:20px;font-weight:700;color:#8c8c8c;}
.leistungsende figure,
.leistungsende img {width:100%;height:auto;padding-top:50px;}

/* ===================== Jobs
=============================
========================== */
.jobsbox {background:#fff;box-shadow:0 0 16px 8px rgba(0,0,0,0.08);padding:50px;margin-top:50px;}
.jb-text h3 {text-transform:uppercase;}
.jb-text p {padding:30px 0 0;line-height:1.5;}
.jb-text a {margin-top:80px;}

.formular h3 {text-transform:uppercase;padding:50px 0;}
.zustellerintro p {padding:50px 0;line-height:1.4;}
.zustellerintro h2 {padding:0 0 50px 0;line-height:1.4;width:80%;margin:0 auto;}

.formular .ff-default .ff-el-form-control {border:none;border-radius:0;padding:20px;}
.formular label {text-transform:uppercase;font-weight:700!important;color:#8c8c8c;}


/* ====================== FAQ
=============================
========================== */
.top-faq .wp-block-details {background:#fff;margin-bottom:20px;}
.top-faq h3 {text-transform:uppercase;padding:50px 0 20px;}
.top-faq .wp-block-details summary,
.top-faq .wp-block-details p {padding:20px;}
.top-faq .wp-block-details ul {margin-left:40px;padding:0 20px 20px 0;}
.top-faq .wp-block-details a {color:#39be85;text-decoration:none;}


/* == Impressum & Datenschutz
=============================
========================== */
.datenschutz p,
.impressum p {padding:10px 0;line-height:1.4;}
#top-body .datenschutz h4,
#top-body .impressum h4 {padding:20px 0;}
.datenschutz ul li,
.impressum ul li {margin-left:20px;}

/* ========= Wartungsarbeiten
=============================
========================== */
.wartung {
  background: rgba(0, 0, 0, .3) url('assets/img/Hintergrund.jpg');
  background-blend-mode:darken;
  background-size:cover;
  background-position:center;
  height:750px;
  padding-top:200px;
  color:#fff;
  line-height:1.5;
}


/* =================== Größen
=============================
========================== */

@media (min-width:2800px){
  .wartung {height:1080px;}
}

@media screen and (max-width: 1100px) {
  header {margin:0;width:100%;}
  .topnav .topmenu a {display: none;}
  .topnav a.icon {float:right;display:block;}

  .topnav.responsive {position:relative;background:#333;}
  .topnav.responsive .icon {position:absolute;right:0;top:0;}
  .topnav.responsive .topmenu a {float:none;display:block;text-align:center;}
  .topnav.responsive .topmenu a:hover {background:#39be85;}
  .responsive .topmenu {float:none;margin-top:100px;}

  .menubar {margin:20px;}
.topnav.responsive .menubar .icon {right:20px;top:20px;}
  .topnav .toplogo a {padding:20px;}
}

@media (max-width:1100px){
  /* Umbruch Spalten */
  .content .wp-block-columns,
  #content .wp-block-columns {flex-wrap:wrap!important;}
  .content .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column,
  #content .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column  {flex-basis:100%!important;}


  /* Allgemein */
  #top-body .wartung #content,
  #footer-backtop p,
  #footer-intro,
  #footer,
  .startintro div,
  .startbox,
  .startinfo,
  .stellenangebote,
  .datenschutz,
  .impressum,
  .jobsbox,
  .zustellerintro,
  .formular,
  .startintro div,
  .startintro div p,
  .startintro div h1,
  .ls-text,
  .top-title .headline,
  .page-headline-text,
  .top-faq {width:90%;}

  #top-body h2 {font-size:35px;}
  #top-body h3 {font-size:25px;}

  #footer-bottom {height:90px;}
  #footer .fright,
  #footer .fleft {float:none;text-align:center;padding:10px 0;}

  .topnav {margin:0 auto;width:100%;}
  .top-title .headline {margin:0 auto;}
  #top-body .headline h1 {font-size:45px;margin-left:5%;margin-top:100px;}
  .page-headline {height:350px;}
  .page-headline-text {margin:110px auto 0 auto;}

  /* Home */
  .startintro {height:700px;}
  .startbox .sbleft img {width:100%;height:auto;}
  .startbox .sbright {padding:0 30px 30px;}
  .startbox .sbright h2,
  .startbox .sbright p {padding-right:0;}

  /* Über Uns */
  .ls-text {padding:30px 0;}
  .leistungen {padding:50px;}
  .leistungen h2,
  .leistungsbox:nth-child(3),
  .leistungsbox:nth-child(2) {padding-bottom:50px;}
  .leistungen .lb-text {position:relative;width:90%;margin:0;margin-top:-2em;}
  .leistungen .leistungsbox:nth-child(3) .lb-text,.lb-img {margin-left:0!important;}
  .lb-img {margin-top:-2em!important;}
  .leistungsende {margin-bottom:-150px;}

  /* Jobs */
  .jb-img {display:none;}
  .jb-text a {margin-top:30px;}

  /* Wartung */
  .wartung {height:720px;}


  #top-body h1 {font-size:45px;}
  #footer-intro p strong {font-size:30px;}
}


@media (max-width:900px){

    #top-body .headline h1 {font-size:35px;}
    #top-body h1 {font-size:35px;}
    #top-body h2 {font-size:25px;}
    #top-body h3 {font-size:20px;}

    #footer-bottom {height:100px;}

    .leistungen {padding:50px 0;}
    .leistungen .lb-text,
    .jobsbox,
    .sa-layout-2 {padding:30px;}
    .topbutton a {width:auto;}

    .wartung {padding-top:100px;height:520px
    .wartung p a {color:#fff;text-decoration:none;}
}