body{
    background-image: url('../assets/kontakt.png');    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}

/* Gilt bis 1500px Breite */
@media only screen and (max-width: 1300px) {
    #normal_icons{
        position: absolute;
        display: none;
    }

    #contact_form{
        margin-left: 15vw;
        padding-block:10vw;
        margin-top: 2vw;
    }

    #contact_form form input{
        margin-block:2vw;
        height: 5vw;
        font-size: 2vw;
        background-color: rgba(256,256,256,0.8);
    }

    #contact_form form input[type=text], #txtAnliegen{
        width: 85%;
        margin-block:1em;
        margin-left: 5vw;        
    }

    #txtAnliegen{
        height: 30vw;
        font-size: 2vw;
        background-color: rgba(256,256,256,0.8);
    }

    #contact_form form input[type=checkbox]{
      appearance: none;
      background-color: rgba(256,256,256,0.8);
      vertical-align: middle;
      width: 3vw;
      height: 3vw;
    }

    #contact_form form input[type=checkbox]:checked{
      appearance: revert;
      background-color: rgba(0,0,0);
    }

    #zeiten{
        position: absolute;
        right: 4vw;
        margin-block: 3vw;
        color: #2b256c;
        font-weight: bold;
        font-size: 2vw;
        width: 35vw;
    }

    #mobil_icons{
        background-image: url('../assets/mobil_icon_background.png');    
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left; 
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 12px;              /* Abstand zwischen Bildern */
        place-items: center;
        padding: 5vw;
        margin-top: 20vw;  
    }

    #s1 { grid-column: 1 / 2; grid-row: 1 / 2; }
    #s2 { grid-column: 1 / 2; grid-row: 2 / 3; }
    #s3 { grid-column: 2 / 3; grid-row: 1 / 2; }
    #s4 { grid-column: 2 / 3; grid-row: 2 / 3; }

    #mobil_icons div img, #mobil_icons div div img{
        height: 6vw;
        margin-inline:auto;       
    }

    #mobil_icons div div {
        column-gap: 3.5vw;
    }

    #s1,#s2,#s3,#s4{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 10vh;
    }

    #mobil_icons div p{
        text-align: center;
        color: white;
        margin-bottom: 4vw;
    }

    #appointment{
        background-color: white;
        padding: 3vw;
        border-radius: 1em/ 1em;
        border: 3px solid #2b256c;
        width: 70vw;
        margin-left: 15vw;
        box-shadow: -10px 10px rgba(0,0,0,0.2);
    }

    .repaintText{
        mix-blend-mode: difference;
        color: white;
    }
}

/* Gilt ab 1501px Breite */
@media only screen and (min-width: 1301px) {

    #contact_form{
        margin-left: 20em;
        padding-block:8em;
    }

    #contact_form form input{
        margin-block:1em;
        font-size: 1vw;
        background-color: rgba(0,0,0,0.2);
    }

    #contact_form form input[type=text]{
        width: 50%;
        margin-block:1em;
    }

    #contact_form form input[type=checkbox]{
      appearance: none;
      background-color: rgba(0,0,0,0.2);
      vertical-align: middle;
    }

    #contact_form form input[type=checkbox]:checked{
      appearance: revert;
      background-color: rgba(0,0,0);
    }

    #txtAnliegen{
        height: 10vw;
        width:40vw;
        font-size: 1vw;
        background-color: rgba(0,0,0,0.2);
    }

    #datenVerarbeitung, #datenschutz{
        width: 1vw;
        height: 1vw;
    }

    #normal_icons img, #normal_icons div img{
        height: 2.5em;
        margin-inline:auto;
        
    }

    #normal_icons p{
        text-align: center;
        color: white;
        margin-bottom: 4vw;
    }

    #normal_icons{
        display:grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        align-items: center;
        width: fit-content;
        height: fit-content;
        margin-left: 4em;
        margin-block: 10vh;
        gap: 5px;
    }

    #zeiten{
        position: absolute;
        right: 5em;
        margin-top: 3em;
        color: #2b256c;
        font-weight: bold;

    }

    #appointment{
        border: 2px solid #2b256c;
        border-radius: 2em / 2em;
        margin-left: 25em;
        padding: 2em;
        width: fit-content;
        box-shadow: -10px 10px rgba(0,0,0,0.2);
    }

    .headline{
        font-size: 2em;
        margin-bottom: 0.4em;
    }

    #mobil_icons{
        display: none;
        position: absolute;
    }
}