body { font-family: sans-serif; background: #f4f4f4; padding: 20px; }
.main-container { display: flex; gap: 20px; }
.work-area { flex: 3; display: flex; flex-direction: column; gap: 20px; }
.row { display: flex; gap: 20px; }
section { background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #ddd; }
.kacheln { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.kachel { padding: 10px; border-radius: 8px; border: 1px solid #ccc; width: 100px; }
.kachel h4 { margin: 0 0 5px 0; font-size: 11px; }
.kachel input { width: 90px; margin-bottom: 5px; border: 1px solid #ccc; border-radius: 4px; padding: 2px; }

/* Farbschema */
.yellow { background-color: #fffacd; border-color: #f0e68c; }
.orange { background-color: #ffe4b5; border-color: #deb887; }
.grey   { background-color: #d3d3d3; border-color: #a9a9a9; }
.red    { background-color: #ffcccc; border-color: #ff0000; } /* Defekte Artikel */
.purple { background-color: #ee82ee; border-color: #da70d6; }
.blue   { background-color: #add8e6; border-color: #87ceeb; }
.green  { background-color: #90ee90; border-color: #32cd32; }
.pink   { background-color: #ffc0cb; border-color: #ffb6c1; }

.sidebar { flex: 1; background: white; padding: 20px; border-radius: 8px; border: 1px solid #ddd; height: fit-content; }
.total-box { background: #fbc02d; padding: 20px; text-align: center; font-weight: bold; margin: 10px 0; border-radius: 4px; }
button { width: 100%; padding: 10px; border: none; cursor: pointer; color: white; border-radius: 4px; margin-top: 5px; font-weight: bold; }
.btn-red { background: #e53935; } 
.btn-green { background: #43a047; }