* {
box-sizing:border-box;
}


body {

margin:0;

padding:20px;

background:#f2f2f7;

font-family:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
Arial,
sans-serif;

color:#111;

}



.app {

max-width:600px;

margin:auto;

}



header {

text-align:center;

margin-bottom:30px;

}



h1 {

font-size:42px;

margin-bottom:5px;

}



header p {

font-size:20px;

color:#666;

}





.card {


background:white;

border-radius:25px;

padding:20px;

margin-bottom:20px;


box-shadow:
0 5px 20px rgba(0,0,0,.08);


}




button {


border:none;

background:#007aff;

color:white;

padding:14px 18px;

border-radius:15px;

font-size:16px;

font-weight:600;

}



button:active {

transform:scale(.96);

}







#lastCheck {

margin-top:15px;

font-size:16px;

color:#555;

}







#photos {


display:flex;

gap:12px;

margin-top:15px;

flex-wrap:wrap;

}



.photoContainer {

position:relative;

width:160px;

}



.photoContainer img {


width:160px;

height:160px;

object-fit:cover;

border-radius:20px;


}




.deletePhoto {


position:absolute;

top:8px;

right:8px;


width:35px;

height:35px;


border-radius:50%;


background:#ff3b30;


color:white;


font-size:22px;


padding:0;


line-height:35px;


}








.overview {


display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

margin-bottom:25px;


}



.box {


background:white;

border-radius:25px;

padding:20px;

text-align:center;

box-shadow:
0 5px 20px rgba(0,0,0,.08);


}



.box h3 {

font-size:17px;

color:#666;

}



.box div {


font-size:35px;

font-weight:bold;

}









.category {


background:white;

border-radius:25px;

padding:20px;

margin-bottom:20px;

box-shadow:
0 5px 20px rgba(0,0,0,.08);


}



.category h2 {


margin-top:0;

}









.item {


display:flex;

justify-content:space-between;

align-items:center;

padding:12px;

margin-bottom:10px;

border-radius:15px;

background:#f7f7f7;


}



.item.available {


border-left:6px solid #34c759;

}



.item.empty {


border-left:6px solid #ff3b30;

}









.controls {


display:flex;

align-items:center;

gap:8px;

}



.controls button {


width:40px;

height:40px;

padding:0;

border-radius:50%;

}



.controls input {


width:55px;

height:40px;

text-align:center;

border-radius:12px;

border:1px solid #ccc;

font-size:18px;

}









.addButton {


width:100%;

margin-top:10px;

}









.modal {


display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.5);

align-items:center;

justify-content:center;

}



.modalContent {


background:white;

padding:25px;

border-radius:25px;

width:90%;

max-width:400px;


}



.modalContent input,

.modalContent select {


width:100%;

padding:14px;

margin-bottom:15px;

border-radius:15px;

border:1px solid #ccc;

font-size:17px;


}







/* Datum Gewechselt am */


.date-ok {

color:#34c759;

font-weight:700;

}



.date-warning {

color:#ff3b30;

font-weight:700;

}






@media(max-width:500px){


.photoContainer,
.photoContainer img {


width:110px;

height:110px;


}


}