.ds {
display: flex;
}

.row {
display:flex;
margin-bottom:10px;
}

.row > div:nth-child(1) {
width:35%;
}

.row > div:nth-child(2) {
width:65%;
}

.cf [type="checkbox"] {
    
  width: 2em;
  height: 2em;
  border:1px solid grey !important;
    border-radius: 5px;
    
}

.cf_wrapper {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
position:relative;
    width:100%;
    margin:auto;
   padding:1em;  


    box-sizing: border-box;

z-index:50;
font-size:1em;
border-radius:15px;
border:1px solid grey;
background-color: rgb(255, 173, 78);

}

.cf {
    width:100%;
    margin:auto;
    padding:1em;
   
    box-sizing: border-box;
}

.cf a {
    
    text-decoration: none;
    border-bottom: 1px dotted black;
    color: black;
}


.cf .wpcf7-form-control-wrap {
    margin-bottom: 0em;
    display: block;
}

.cf input, .cf textarea {
    padding:0.5em 1em;
    border:1px solid grey;
    border-radius: 5px;
    
    width:100%;
    font-family:'Exo';
    font-size:1em;
    box-sizing: border-box;
}




.cf [type="checkbox"]:checked {
    content:'X';
    background-color: rgb(73, 94, 192) !important;
    color: white;
}



input[type=submit] {
    padding:1em !important;
    color: white;
    margin-top:1em;
    width:100% !important;
    margin-bottom:0 !important;
background: #1bbf3a;
}

.wpcf7-submit:disabled {
background-color:#64646c;
color:white;
}



.wpcf7-not-valid-tip {
    background-color: rgba(255, 0, 0, 0.2);
    text-align: center;
    padding:0.5em;
    color:white;
}


.cf_headline {
text-align:center;
font-size:2em;
font-weight:bold;
margin:0.5em 0 0.2em 0;
}



/* ===============================
   MOBILE / TABLET ANPASSUNGEN
   =============================== */

@media (max-width: 1100px) {

  /* normale Formularzeilen stapeln */
  .row {
    flex-direction: column;
  }

  .row > div:nth-child(1),
  .row > div:nth-child(2) {
    width: 100%;
  }

  /* etwas Luft zwischen Label und Feld */
  .row > div:nth-child(1) {
    margin-bottom: 0.3em;
    font-weight: bold;
  }

  /* Datenschutz-Zeile über volle Breite */
  .ds {
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .ds > div:nth-child(2) {
    width: 100%;
  }


   .ds > div {text-align: center;}
   

  /* Checkbox nicht links angeklebt wie ein Fremdkörper */
  .cf [type="checkbox"] {
    margin-right: 0.5em;
  }
}