@media (min-width: 858px) {
    .head{
        font-size: 12px;
    }
}

@media (min-width: 780px) {
    .head{
        font-size: 11px;
    }
}

@media (min-width: 702px) {
    .head{
        font-size: 10px;
    }
}

@media (min-width: 724px) {
    .head{
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    .head{
        font-size: 8px;
    }
}

.nav {
	background-color: #007bff;
	color: white;
	--position: fixed;
	z-index: 99;
}

.head {
	background-color: DeepSkyBlue;
	color: white;
	text-align:center;
	font-size: 10px;
}

.head p {
	margin-left: auto;
	margin-right: auto;
	width: 6em;
}
.head button {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 6em;
}

.grid{
	width: 40px;
	height: 40px;
	font-size: 36px;
}

.karte {
height: 85px;
width: 85px;  
background-image:url('image/buttons/closed.jpg');
background-repeat:no-repeat;
 float: left;
 margin: 2%;
 padding: 20px;
 box-sizing: border-box;
}
.karte:last-child {
     margin-right: 0;
}

.zahl {
height: 45px;
width: 45px;  
 float: left;
 margin: 2%;
 padding: 20px;
 box-sizing: border-box;
}
.zahl:last-child {
     margin-right: 0;
}

#k{font-size: 28px;}
#d{font-size: 28px;}
.hug {
     font-size: 28px;
	 text-align: center;
}
.btn_prefer{
	height:50px;
    width:50px;
}