/*
  =================================================
  Abschnitte Design
  =================================================
  */
  

  /* Header */


  header, nav, section {display: block;}
    
  header {
    top:0px;
    position:relative;
    height:95px;
    width:100%;
    z-index:10;
    box-shadow: 0 1px 8px rgba(0,0,0,.3)
  }
  #Content {
    top:0;
    position:relative;
  }
  
  nav {
    bottom:0px;
    height:60px;
    left:0px;
    display: flex;
    position:absolute;
    width:100%;
    background-color: #fff;
  }
  * html nav {
    top:expression(auto);
  }
  .fixed-navi {
    top:0px;
    position:fixed !important;
    position:absolute;
    box-shadow: 0 1px 8px rgba(0,0,0,.3)
  }
  * html .fixed-navi {
    top:expression(documentElement.scrollTop);
  }
  
  .h4e887wj {
      line-height: 1.5;
      letter-spacing: .150rem;
      margin-right: 50px;
      color: #171717;
      font-weight: 600;
      font-size: 1.25rem;
      cursor: var(--click_pointer);
      text-decoration: none;
  }

  header .servicehotline {
    height: 35px; 
    background-color: rgb(33, 33, 33); 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    padding-right: 25px; 
    line-height: 1.5; 
    letter-spacing: .150rem; 
    color: #fff; 
    text-transform: uppercase; 
    font-weight: 600; 
    font-size: 1.25rem; 
  }
  
  header nav .left {
    width: 250px; 
    display: flex; 
    align-items: center; 
    justify-content: left; 
    margin-left: 25px; 
    float: left; 
  }
  header nav .left svg {
    height: 60%
  }
  
  header nav .right {
    width: calc(100% - 250px); display: flex; height: auto; justify-content: flex-end; align-items: center; margin-right: 25px; float: right;
  }
  
  






.orangedot {
    color: rgb(255, 152, 0);
}



  /* Assistant */

  .asi_input {
    width: -webkit-fill-available;
    width: calc(100% - 3em); 
    border: none;    
    color: #101010;
    height: 3.5em;

    display: block;

    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-top: .4em;
    margin-bottom: 1.2em;
}

.nofill{
  background-image: url(/assets/img/invalid.svg);
    background-repeat: no-repeat;
    background-position: center right 1em;
    background-size: 2.4vh;
}

.asi_textfld {
  resize: none;
    height: 10.6em;
    padding-top: .9em;
    margin-bottom: .45em;
    font-family: 'Poppins', sans-serif;
}



  /* Abscnitt 1 */

  .start_1 {
    padding: 12rem 0rem 8rem !important;
    height: auto;
  }
  
  .nd9fv3z8 {
      background-image: url(../images/bg/dreieck_top_yellow.svg);
      background-position: right top;
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 1;
  }


  .xcntsn52 {
    color: rgb(33, 33, 33);
    font-weight: 600;
    font-style: italic;
    font-size: 60px;
    text-align: left;
    line-height: 1em;
    letter-spacing: -0.06em;
    font-family: 'Poppins', sans-serif;
  }
  

  .st_btn {    
    cursor: var(--click_pointer);
    display: inline-block;
    text-decoration: none;
    width: auto;
    font-weight: 600;
    background: #fff;
    border-radius: 32px;
    color: rgb(33, 33, 33);
    letter-spacing: .0625rem;
    line-height: 1.5rem;
    padding: 12px 24px;
    border: 2px solid #FF9800;
    -webkit-transition: background .3s ease,box-shadow .3s ease;
    transition: background .3s ease,box-shadow .3s ease;
}
    .st_btn:hover {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 13px 30px 0px;
        background-color: #FF9800;

    }


  .tjskycnh img {
      width: 100%
  }
  
  /* Abschnitt 2*/

  .start_2 {
  padding: 22rem 0 !important;
  height: auto;
  }

  .ab62vtu7 {
    background-image: url(../images/bg/step_2_bg.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: top;
    background-size: cover;
    opacity: 1;
  }

  .kn8b6wpc img {
    width: 100%; 
    border-radius: 75px 75px 250px 75px; 
    box-shadow: 0 13px 30px 0 rgba(0, 0, 0, .2);
  }
 
  .gxduqsz5 {
    padding: 35px 0 0 0;
  }

  .ek4tvrs7 {
    margin-bottom: 24px; 
    font-size: 16px; 
    font-weight: 300;
  }
  .ek4tvrs7 .czce5tah {
    background-color: #f9f9f9;
    border-radius: 10px;
    display: block;
    height: 4px;
    width: 32px;
    position: initial;
    top: 24px;  
  }

  .yq9cvhwm {
    color: #2196F3; 
    font-weight: 300; 
    font-size: 40px; 
    line-height: 1em; 
    letter-spacing: -.06em; 
  }

  .yq9cvhwm span {
      font-weight: 700; 
      font-style: italic; 
  }

  .bwxhwwnv {
      padding: 16px 0; 
      font-size: 20px; 
      line-height: 1.2;
  }

/* Rezepte */
.mk__unterstrich__grey {
    background-image: linear-gradient(#ffc007 0%, #ff9800 100%);
    border-radius: 10px;
    display: block;
    height: 4px;
    width: 32px;
  }
  
  .rezept-ab1 {
    height: 13vh;
  }
  
  .rezept-ab1 .überschrift {
    color: #101010
    ; font-weight: 600; 
    font-size: 18px; 
    line-height: 1em; 
    letter-spacing: -.06em; 
    padding: 16px 16px 0; 
  }
  
  .rezept-ab1 .text {
    padding: 16px 16px 0;
    font-size: 1em;
    line-height: 1.2;
    color: #212121;
  }
  
  .rezept-ab2 {
    height: 7vh; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
  }
  
  
  .rezept-ab2 .kreis {
    background-image: linear-gradient(#ffc007 0%, #ff9800 100%);  
    margin-right: 12px; 
    border-radius: 32px; 
    font-weight: 600; 
    color: #fff; 
    font-size: 28px; 
    line-height: 1.5rem; 
    width: 44px; 
    height: 44px; 
    display: flex; 
    justify-content: center; 
    align-items: center;
  }
  


  /* Abschnitt 3 */

  .start_3 {
    margin: 5rem 0 0 !important;
    padding: 5rem 0 !important;
    height: auto;
  }

  .bvu3fhr7 img {
    width: 100%; 
    border-radius: 250px 75px 75px 100px; 
    border: 0px solid #fff0; 
    box-shadow: 0 0 0 8px #ffa301;
    border-width: 4px; 
    margin-bottom: 0px;
  }

  .fpydx6g6 {
      color: #212121; 
      font-weight: 300; 
      font-size: 40px; 
      line-height: 1em; 
      letter-spacing: -.06em; 
  }

  .fpydx6g6 span {
      font-weight: 700; 
      font-style: italic; 
      color: #FFC107;
  }

  .jhm37nsy {
      padding: 16px;
      margin-top: 50px;
      font-size: 20px;
      color: #fff;
      border-radius: 4px;
      font-weight: 500;
      background-image: linear-gradient(120deg, #FFC107 0%, #FFA000 100%);
  }

  /* Abschnitt 4 */

  .start_4 {
    padding: 10rem 0 !important;
    height: auto;
  }

  .qyyjrdze {
    background-image: linear-gradient(#ffc007 0%, #ff9800 100%);
    color: #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: top;
    background-size: cover;
    opacity: 1;
  }

  /*
  =================================================
  Fußdesigns
  =================================================
  */
  

  .down:after {
    content: "";
    position: absolute;
    background-image: url(../images/bg/down.svg);
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
}


  .qc8824d8:after {
      content: "";
      position: absolute;
      background-image: url(../images/bg/wave.svg);
      width: 12.2em;
      height: 1.3em;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: contain;
  }


.border {
    border: 1px solid #f9f9f9;
    border-radius: 6px;
    padding: 8px;
}

.head-brand {
    height: 48px;
    width: 300px;
    padding-left: 16px;
    display: flex;
    align-items: center;
}

.head-middle {
    height: 48px;
    width: calc(100% - 300px);
    padding-right: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-image: url();
    background-position: right;
    background-repeat: no-repeat;
}









/*
=================================================
Angebot erstellen lassen
=================================================
*/


/* Aufteilung Angobot Felder */
                      
.sdfsdf {
    width: calc(100% / 2 - 10px);
    margin: 8px 4px 0px 0px !important;
  }
  
  .sdfsdf:nth-child(2n) {
    margin: 8px 0px 0px 4px !important;
  }
  
  .ckd89s {
      border: 2px solid rgb(232, 234, 237);
      background: #fff;
      border-radius: 10px;
      height: 20vh;
      cursor: var(--click_pointer);
  }        
  
  /* Icon Bereich */
  
  .ckd89s .zpu5urt4 {
    -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; display: flex; 
  }
  
  .ckd89s .zpu5urt4 .ta37fve8{
    height: 14vh; background-color:#fff; border-radius: 10px 10px 0px 0px; display: flex; justify-content: center; align-items: center;
  }
  
  .ckd89s .zpu5urt4 .ta37fve8 svg{
    height: 75px;
    max-width: 65%;
    
  }
  
  /* Überschrift */
  
  .ckd89s .qx5tmk9r {
    height: 6vh; display: flex; align-items: center; justify-content: center; color: #101010; font-weight: 600; font-size: 18px; letter-spacing: -.06em;
  }
  
  
  
  
  .feld-active {
    border: 2px solid rgb(255 152 0);
  }
  
  
  /* Assistand Auflistung der Kundenauswahl */

  .checklist-body {
    border: 1px solid rgb(232, 234, 237); 
    background: #fff; 
    border-radius: 10px; 
    padding: 1.5em; 
    margin-bottom: 1.2em; 
  }
  
  .checklist-body .checklist-ueb{
    color: #101010; 
    font-weight: 600; 
    font-size: 18px; 
    line-height: 1em;
    letter-spacing: -.06em; 
    padding-bottom: 16px;
   }

  .checklist-body .checklist:last-of-type {
    padding: 0px 0px 0px 0px;
  }
  .checklist-body .checklist {
    padding: 0px 0px 16px 0px; font-size: 1em; line-height: 1.2;  color: #212121;
  }




/* Was wir machen */


.wirmachen-section {
    margin: 2.5rem 0;
  }
  
  .wirmachen-section .wirmachen {
    border: 2px solid rgb(232, 234, 237); 
    border-radius: 10px;  
    padding: 2.6em; 
    text-align: left;
  }
  
  .wirmachen-section .wirmachen .wirmachen-ueb {
    color: #212121; 
    font-weight: 600; 
    font-size: 39px; 
    line-height: 1em; 
    letter-spacing: -.06em; 
    padding: 0 0 8px; 
  }
  
  .wirmachen-section .wirmachen .wirmachen-text {
    font-size: 1em; 
    letter-spacing: -0.06em; 
    color: #212121;
  }
  


/*
=================================================
Buttons im Materialdesign
=================================================
*/

button {
    background: transparent;
    padding: 0 16px;
    margin: 0 0 0px 8px !important;
    border: none;
    border-radius: 4px;
    outline: none;
    text-transform: uppercase;
    font: 500 .9em/2.5 Roboto;
    white-space: nowrap;
    cursor: undefined;
    cursor: var(--click_pointer);
    transition: .2s;
}

button:disabled {
display: none;
  }


button.but100 {
    width: 100% !important;
}

button a {
    display: inline-block;
    width: calc(100% + 32px);
    color: inherit;
    text-decoration: none;
    transform: translateX(-16px);
}

/* Button Weiß mit Rand */

button.whitebtn {
    color: #2196F3;
    border: 1px solid #dadce0 !important;
    background: #fff;
}

button.whitebtn:hover {
    background: rgb(212 234 255);
}

/*Button Weiß ohne Rand*/

button.ghostbtn {
    color: #2196F3;
    /*border: 1px solid #dadce0 !important;*/
}

button.ghostbtn:hover {
    background: rgba(153, 153, 153, 0.2);
}


/* Button Light-Rot */

button.redbtn {
    background: #F44336;
    color: #FFCDD2;
    box-shadow: 0 0 2px rgba(66, 133, 244, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}

button.redbtn:hover {
    background: #D32F2F;
    color: #fff;
    box-shadow: 0 0 4px rgba(66, 133, 244, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

/* Button Light-Blau */

button.bluebtn {
    background: #2196F3;
    color: #BBDEFB;
    box-shadow: 0 0 2px rgba(66, 133, 244, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}


button.bluebtn:hover {
    background: #1976D2;
    color: #fff;
    box-shadow: 0 0 4px rgba(66, 133, 244, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}













/*
=================================================
hamburger Icon
=================================================
*/

.hamburger {
    line-height: 1 !important;
}

.hamburger i {
    color: #808284;
    cursor: var(--click_pointer);
    line-height: 1 !important;
}


/*
=================================================
Hamburger Modal / Links oben bei Klick auf Hamburger Icon
=================================================
*/

.hamburgermenue {
    display: none;
    position: fixed;
    z-index: 1;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.4s;
    animation-name: fadeham;
    animation-duration: 0.4s;
    background-color: rgba(0, 0, 0, 0.4);
}

/* hamburgermenue Content */

.hamburgermenue-content {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fefefe;
    width: 300px;
    height: calc(100% - 0px);
    -webkit-animation-name: slideham;
    -webkit-animation-duration: 0.4s;
    animation-name: slideham;
    animation-duration: 0.4s;
    -webkit-box-shadow: 0 -2px 2px 1px rgba(0, 0, 0, 0.26);
    box-shadow: 0 -2px 2px 1px rgba(0, 0, 0, 0.26);
}

.close {
    display: inherit;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: var(--click_pointer);
}

.hamburgermenue-header {
    border-radius: 6px 6px 0px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: #808284;
    display: inherit;
    align-items: center;
}

.hamburgermenue-header-links {
    display: block;
    text-align: left;
    float: left;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 11px;
}

.hamburgermenue-header-rechts {
    display: block;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 11px;
}

.hamburgermenue-body {
    height: 100%;
}

.hamburgermenue-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */

@-webkit-keyframes slideham {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

@keyframes slideham {
    from {
        left: -300px;
        opacity: 1
    }

    to {
        left: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeham {
    from {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes fadeham {
    from {
        opacity: 1
    }

    to {
        opacity: 1
    }
}


/* Auflistung im Haburger Menue */

[class^=ham-icon-] {
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    background: #ebeff1;
    50% / cover;
    color: #808284;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ham-icon-24 {
    width: 24px;
    height: 24px;
}

.ham-icon-32 {
    width: 32px;
    height: 32px;
}

.ham-icon-40 {
    width: 40px;
    height: 40px;
}

ul.hamburger-list {
    display: table;
    width: 100%;
    padding: 8px 0;
    margin: 0;
    list-style: none;
}

ul.hamburger-list li {
    display: table-row;
    height: 48px;
}

ul.hamburger-list li>* {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    cursor: var(--click_pointer);
}

ul.hamburger-list li:hover {
    background-color: #ebeff1;
    color: #808284;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

ul.hamburger-list li>*:first-child {
    padding-left: 16px;
}

ul.hamburger-list li>*:last-child {
    padding-right: 16px;
}

ul.hamburger-list .hamburger-list-icon {
    width: 72px;
}

ul.hamburger-list .hamburger-list-text {
    color: #808284;
}

ul.hamburger-list .hamburger-list-icon-secundary {
    padding-left: 16px;
    width: 1px;
    text-align: center;
}



/*
=================================================
Radio Buttons im Material Design 2
=================================================
*/

@keyframes ripple {
    0% {
        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
    }

    50% {
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.1);
    }

    100% {
        box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0);
    }
}



.md-radio {
    margin: 8px 0;
}

.md-radio.md-radio-inline {
    display: inline-block;
}

.md-radio input[type="radio"] {
    display: none;
}

.md-radio input[type="radio"]:checked+label:before {
    border-color: #ff5e00;
    animation: ripple 0.2s linear forwards;
}

.md-radio input[type="radio"]:checked+label:after {
    transform: scale(1);
}

.md-radio label {
    display: inline-block;
    height: 16px;
    position: relative;
    padding: 0 24px;
    margin-bottom: 0;
    cursor: undefined;
    cursor: var(--click_pointer);
    vertical-align: bottom;
}

.md-radio label:before,
.md-radio label:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    transition: all 0.3s ease;
    transition-property: transform, border-color;
}

.md-radio label:before {
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    border: 2px solid undefined;
    border: 2px solid var(--main-border);
}

.md-radio label:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    transform: scale(0);
    background: #ff5e00;
}

/*
=================================================
Verfügbarkeit nur bei:
=================================================
*/

.desktop-only {
    display: inherit;
}

.mobile-only {
    display: none;
}

/*
=================================================
mkcard
=================================================
*/

.mk__card {

    border-radius: 4px;
    box-shadow: 0 13px 30px 0 rgba(0, 0, 0, .08);
    background-color: #fff;
    margin-bottom: 16px;
    display: flow-root;
    position: sticky;
}

.p8 {
    padding: 8px;
    display: flow-root;
}

.abschnitt {
    padding-bottom: 16px;
}


/*
=================================================
Footer
=================================================
*/

.mpa5et6j {
    padding: 40px 0 40px; background-color: #fff; color: #101010; 
}

.mpa5et6j .j6zgwry8 {
    text-align: center; 
    font-size: 16px; 
    font-weight: 600;
}


.mpa5et6j .j6zgwry8 .wuuu7eud a {
    color: #ff9800
}

.mpa5et6j .j6zgwry8 .wuuu7eud a:before {
  content: " | ";
  font-weight: 300;
  font-size: 16px;
  left: 0;
  color: #101010;
  display: inline-block;
  padding-right: 5px;
}

.mpa5et6j .j6zgwry8 .wuuu7eud a:first-of-type::before {
  content: none;
}

.u8q623du {
    height: 35px; color: #101010; display: flex; justify-content: center; align-items: center; font-size: 1em; font-weight: 300;
}





@media (max-width: 550px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: inherit !important;
    }

    .start_1 {
        padding: 5rem 0rem 2rem !important;
    }

    .edy7u53u {
        padding-bottom: 5rem;
    }

.xcntsn52 { 
    text-align: center;
}


    

.w58epdxd::after {
    background-image: none;
}


    .nd9fv3z8 {
        background-size: 75% auto;
    }

    .nd9fv3z8

    .tjskycnh {
        display: none;
    }




.start_2 {
    padding: 10rem 0px !important;
}





.start_3 {
    margin: 0px !important;
}

.bvu3fhr7 img {
    margin-bottom: 24px !important;
}


 .jhm37nsy {
     margin-top: 24px !important;
 }




.start_4 {
    padding: 5rem 0px !important; 
}



/* Header */

header .servicehotline {
    justify-content: center;
    padding-right: 0px;
}

header nav .left {
    width: 100%;
    justify-content: center;
    margin-left: 0px;
}


.wirmachen-section {
    padding: 1.5rem 0 1.5rem;
}

.wirmachen-section .wirmachen {
    border: 0px solid;
    padding: 0;
    text-align: center;
}




}